Redux-Thunk 是 Redux 的一个中间件，它允许我们在 Redux 应用中使用异步操作。在 Next.js 中，我们可以通过使用 next-redux-wrapper 包来集成 Redux 和 Redux-Thunk。
安装
首先，我们需要安装 next-redux-wrapper 和 redux-thunk：
npm install next-redux-wrapper redux-thunk
配置 Store
我们需要创建一个 Redux store，并将其包装在 next-redux-wrapper 的 withRedux 高阶函数中。在这个过程中，我们需要将 redux-thunk 中间件应用到 store 中。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------- - ---- --------------------- ------ --------------- ---- -------------- ------ ----------- ---- ------------- ----- ---------- - ------------------ ----- --------- - -- -- ------------------------ -------------------------------- ------ ----- ------- - ------------------------ - ------ ---- ---展开代码
在上述代码中，我们首先将 redux-thunk 中间件添加到 middleware 数组中。然后，我们使用 applyMiddleware 方法将中间件应用到 store 中。最后，我们将 store 包装在 next-redux-wrapper 的 createWrapper 函数中，以便在 Next.js 中使用。
创建 Action
在 Redux 中，我们通过创建 action 来触发 state 的更新。在使用 Redux-Thunk 时，我们可以使用 action creator 返回一个函数，而不是一个对象。这个函数将在异步操作完成后被调用，并且可以使用 dispatch 和 getState 方法来更新 Redux store。
-- -------------------- ---- ------- ------ ----- ---------- - -- -- - ------ ----- ---------- --------- -- - ---------- ----- --------------------- --- --- - ----- -------- - ----- ---------------------------------------------------- ----- ----- - ----- ---------------- ---------- ----- ---------------------- -------- ----- --- - ----- ------- - ---------- ----- ---------------------- -------- ----- --- - -- --展开代码
在上述代码中，我们首先 dispatch 了一个 FETCH_POSTS_REQUEST action，表示异步操作已经开始。然后，我们使用 fetch 方法从远程 API 获取数据，并将其转换为 JSON 格式。在获取数据后，我们 dispatch 了一个 FETCH_POSTS_SUCCESS action，将数据传递给 Redux store。如果出现错误，我们 dispatch 了一个 FETCH_POSTS_FAILURE action，将错误信息传递给 Redux store。
使用 Action
我们可以在组件中使用 useDispatch 和 useSelector 钩子来使用 Redux store 中的数据和方法。
-- -------------------- ---- ------- ------ - ------------ ----------- - ---- -------------- ------ - ---------- - ---- ------------- ----- ----- - -- -- - ----- -------- - -------------- ----- ----- - ------------------- -- ------------- ----- ----------- - -- -- - ----------------------- -- ------ - ----- ------- --------------------------- -------------- -------------- -- ------------------ ------------ -- --------- ------------------ ----------- -- - ---- ---------------------- -- - --- ------------------------------- --- ----- -- ------ -- -- ------ ------- ------展开代码
在上述代码中，我们首先使用 useDispatch 钩子获取 dispatch 方法。然后，我们使用 useSelector 钩子获取 Redux store 中的 posts 数据。在点击按钮时，我们调用 fetchPosts 方法，这个方法会 dispatch 一个异步 action。在组件中，我们根据 posts 数据的状态来渲染 UI。
结论
在本文中，我们介绍了如何在 Next.js 中使用 Redux-Thunk。我们首先安装了 next-redux-wrapper 和 redux-thunk 包，然后配置了 Redux store，并创建了一个异步 action。最后，我们在组件中使用了 useDispatch 和 useSelector 钩子来使用 Redux store 中的数据和方法。
通过本文的学习，我们可以更好地理解 Redux-Thunk 的工作原理，并且能够在 Next.js 中使用 Redux-Thunk 来处理异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6754233a1b963fe9cc4c7619
