Redux-thunk 是 Redux 中用于处理异步 action 的中间件，通过它可以实现异步操作和副作用，比如网络请求和定时器等。本文将讲解如何使用 Redux-thunk 实现图片上传功能。
简述
图片上传是前端应用中常见的功能，主要涉及到以下几个步骤：
- 选择图片并获取文件对象；
- 将文件对象转换为可上传数据，比如 base64 格式或 formData 格式；
- 发送请求将数据上传到后端服务器；
- 接收后端服务器返回的上传结果。
其中，第3步涉及到网络请求，是一个异步操作。使用 Redux-thunk 可以将这个异步操作封装为 action creator，让它具有异步能力。
使用 Redux-thunk
Redux-thunk 是 Redux 官方提供的中间件。在 Redux 应用中使用 Redux-thunk，需要在创建 store 时应用该中间件。
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));在 Redux-thunk 中，action creator 可以返回一个函数，这个函数接收两个参数：dispatch 和 getState，分别用于派发 action 和获取 store 的 state。这样，我们就可以在 action creator 内部执行异步操作，并在异步操作完成后派发 action。
-- -------------------- ---- -------
------ ----- ----------- - ---- -- -
------ -------- -- -
---------- ----- ---------------------- ---
----- --------- - ----------------------
------------------------- ------------------------ -- -
---------- ----- ----------------------- -------- ------------- ---
-------------- -- -
---------- ----- ----------------------- ----- ---
---
--
--在上述代码中，uploadImage 是一个 action creator，它接收一个文件对象 file，并返回一个函数，函数内部执行了异步操作 axios.post，并在异步操作完成后派发了不同的 action。
示例代码
以下是一个使用 Redux-thunk 实现图片上传功能的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ----------- - ---- -- -
------ -------- -- -
---------- ----- ---------------------- ---
----- --------- - ----------------------
------------------------- ------------------------ -- -
---------- ----- ----------------------- -------- ------------- ---
-------------- -- -
---------- ----- ----------------------- ----- ---
---
--
--
----- --------------- - ---- -- -
----- ------ - --- -------------
---------------------------
------ --- --------------- -- -
------------- - -- -- --------- ----- ------------- ---
---
--
----- ------------ - -
-------- ------
------ -----
---- ----
--
------ ----- ------------------ - ------ - ------------- ------- -- -
------------------- -
---- -----------------------
------ - --------- -------- ---- --
---- -----------------------
------ - --------- -------- ------ ------ ----- ---- -------------- --
---- -----------------------
------ - --------- -------- ------ ------ ------------- ---- ---- --
--------
------ ------
-
--其中，createImageData 函数是将文件对象转换为 base64 数据的函数。uploadImageReducer 是处理上传图片操作的 reducer。
在组件中，我们可以调用 uploadImage 函数来触发图片上传操作，并在组件内部监听 uploadImageReducer 中的状态，从而渲染上传结果。
总结
使用 Redux-thunk 可以很方便地实现异步操作，尤其适合与 Redux 结合使用。在使用 Redux-thunk 时，需要注意 action creator 返回的必须是一个函数，且在函数内部执行异步操作，并在异步操作完成后派发对应的 action。在实现图片上传功能时，我们可以将文件对象转换为 base64 或 formData 格式，然后通过网络请求上传到后端服务器。通过监听 reducer 中的状态变化，可以方便地渲染上传结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a95fc648841e989459980a