javascript - 轻松设置 react redux with next.js (React)

Question

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

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。