Redux-thunk 是一个 Redux 的中间件,它允许我们在 Redux 的 action 中使用异步函数,并且可以在异步函数中 dispatch action。在实际的项目中,我们经常需要在 action 中进行异步操作,比如发送网络请求或者定时器等。Redux-thunk 就是为了解决这个问题而存在的。
Redux-thunk 的使用
在 Redux 中,我们通常通过 dispatch 来触发 action。Redux-thunk 的作用就是让我们可以在 action 中使用异步函数,比如发送网络请求。下面是一个使用 Redux-thunk 的示例代码:
import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore( rootReducer, applyMiddleware(thunk) );
在上面的代码中,我们先引入了 Redux-thunk,然后在创建 store 的时候,使用 applyMiddleware 来将其作为中间件传入。这样就完成了 Redux-thunk 的配置。
接下来,我们可以在 action 中使用异步函数了。例如,我们可以编写一个发送网络请求的 action:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----- --------- - -- -- - ------ -------- -- - ---------- ----- -------------------- --- ------------------ -------------- -- - ---------- ----- --------------------- -------- ------------- --- -- ------------ -- - ---------- ----- --------------------- -------- ----- --- --- -- --
在上面的代码中,我们先 dispatch 了一个 FETCH_USER_REQUEST 的 action,表示正在发送请求。然后使用 axios 发送网络请求,如果请求成功,则 dispatch 一个 FETCH_USER_SUCCESS 的 action,否则 dispatch 一个 FETCH_USER_FAILURE 的 action。
常见问题解决
在使用 Redux-thunk 的过程中,可能会遇到一些常见问题,下面我们来一一解决。
如何在 action 中获取 state?
在 action 中获取 state,可以使用 getState 方法。例如:
-- -------------------- ---- ------- ------ ----- --------- - -- -- - ------ ---------- --------- -- - ----- - ---- - - ----------- ---------- ----- -------------------- --- ----------------------------- -------------- -- - ---------- ----- --------------------- -------- ------------- --- -- ------------ -- - ---------- ----- --------------------- -------- ----- --- --- -- --
在上面的代码中,我们使用 getState 方法获取了当前的 state,然后根据 state 中的 user id 发送了网络请求。
如何在 action 中使用多个异步函数?
在 action 中使用多个异步函数,可以使用 async/await 或者 Promise.all 等方法。例如:
-- -------------------- ---- ------- ------ ----- ------------- - -- -- - ------ ----- -------- -- - ---------- ----- ------------------------- --- ----- ----------- - ------------------- ----- ------------- - --------------------- --- - ----- -------------- --------------- - ----- ------------------------- ---------------- ---------- ----- -------------------------- -------- - ----- ------------------ ------- ------------------- - --- - ----- ------- - ---------- ----- -------------------------- -------- ----- --- - -- --
在上面的代码中,我们使用 async/await 和 Promise.all 方法,分别发送了获取用户信息和获取订单信息的网络请求,并在请求完成后 dispatch 一个 FETCH_USER_DATA_SUCCESS 的 action。
如何在 action 中取消异步请求?
在 action 中取消异步请求,可以使用 axios 的 cancelToken。例如:
-- -------------------- ---- ------- ------ ----- ---- -------- --- ------- ------ ----- --------- - -- -- - ------ -------- -- - -- -------- - --------- - ----- ------ - --------------------------- ------ - -------------- ---------- ----- -------------------- --- ------------------ - ------------ ------------ -- -------------- -- - ---------- ----- --------------------- -------- ------------- --- -- ------------ -- - -- ------------------------ - ---------- ----- --------------------- -------- ----- --- - --- -- --
在上面的代码中,我们使用 axios 的 CancelToken 来取消异步请求。首先,我们定义了一个 cancel 变量,用于保存 cancel 函数。然后,在每次发送请求前,先调用 cancel 函数,取消之前的请求。接着,使用 axios 的 CancelToken.source 方法创建一个 cancelToken,然后将其传入 axios 的请求配置中。在请求成功或失败后,判断是否是取消请求的错误,如果不是,则 dispatch 相应的 action。
总结
Redux-thunk 是一个非常有用的 Redux 中间件,它允许我们在 action 中使用异步函数,并且可以在异步函数中 dispatch action。在实际的项目中,我们经常需要在 action 中进行异步操作,Redux-thunk 就是为了解决这个问题而存在的。在使用 Redux-thunk 的过程中,我们还需要解决一些常见问题,比如如何在 action 中获取 state、如何在 action 中使用多个异步函数和如何在 action 中取消异步请求等。希望本文能对大家有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65e3e8031886fbafa4026ccb