使用 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 {

  render () {

    const { Component, pageProps, router, store } = this.props

    return (

          <Provider store={store}>

              <Component router={router} {...pageProps} />

          </Provider>

    )

  }

}

export default withRedux(createStore)(

  withRouter(MyApp)

)

在您的页面/组件中，您可以像平常一样使用 Redux。

Answer 2

这是我最简单的方法，你可以照着做。 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

没有比这更容易的了