使用 next.js 轻松设置 React Redux (React)

Question

我看过 next.js 使用 redux 的示例。但是有没有简单的方法可以使用 next.js 设置 redux 呢？我想按照我以前使用react.js设置的方式设置redux

Answer 1

假设您了解 Redux 和 React 的知识。首先，安装这些包$ npm install next-redux-wrapper react-redux redux redux-thunk --save$ npm install redux-devtools-extension --save-dev覆盖或创建默认App，创建文件./pages/_app.js如下所示：import withRedux from 'next-redux-wrapper'import { Provider } from 'react-redux'import { withRouter } from 'next/router'import App from 'next/app'import createStore from 'store/createStore'class MyApp extends App {&nbsp; render () {&nbsp; &nbsp; const { Component, pageProps, router, store } = this.props&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Provider store={store}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Component router={router} {...pageProps} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Provider>&nbsp; &nbsp; )&nbsp; }}export default withRedux(createStore)(&nbsp; withRouter(MyApp))在您的页面/组件中，您可以像平常一样使用 Redux。

Answer 2

这是我最简单的方法，你可以照着做。&nbsp;https://github.com/imimran/next-redux-example

Answer 3

我建议使用redux 工具包，因为它减少了 redux 中的样板代码......使用createSlice，您可以同时创建Action 和Reducer。如果将 API 调用分派到后端并对待处理、已完成和拒绝的 API 调用执行适当的状态突变，createAsyncThunk是最好的！根据我的个人经验，如果您只是为了初步学习而问这个问题，那么您作为答案附加的第一个设置就足够了，但对于真正的应用程序来说，所以绝对应该使用 Redux Toolkit。您可以检查这个沙箱示例

Answer 4

https://github.com/vercel/next.js/tree/canary/examples/with-redux-wrapper没有比这更容易的了