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