在next.js中使用React Redux

问题描述：

我尝试将Redux与 next.js starter 项目一起使用，并安装了 next-redux-wrapper 转到该项目，但是我不确定该项目中的根文件在哪里.

I try to use Redux with next.js starter project and I installed next-redux-wrapper on to the project but I'm not sure where is the root file in this project.

我尝试遵循 next-redux-wrapper 上显示的教程>但没有成功.没什么改变.

I try to follow the tutorial which shown on the next-redux-wrapper but no success. Nothing change.

请帮助我如何将Redux添加到项目中.

Please help me how to add Redux on to the project.

关于.

答

Next.js使用App组件初始化页面.您可以覆盖它并控制页面初始化.

Next.js uses the App component to initialize pages. You can override it and control the page initialization.

尽管此演示是针对next.js的，但它应适用于nextjs-starter.

Although this demo is for next.js it should work for nextjs-starter.

安装next-redux-wrapper:

npm install-保存next-redux-wrapper

将 _app.js 文件添加到 ./pages 目录:

Add _app.js file to ./pages directory:

// pages/_app.js
import React from "react";
import {createStore} from "redux";
import {Provider} from "react-redux";
import App, {Container} from "next/app";
import withRedux from "next-redux-wrapper";

const reducer = (state = {foo: ''}, action) => {
    switch (action.type) {
        case 'FOO':
            return {...state, foo: action.payload};
        default:
            return state
    }
};

/**
* @param {object} initialState
* @param {boolean} options.isServer indicates whether it is a server side or client side
* @param {Request} options.req NodeJS Request object (not set when client applies initialState from server)
* @param {Request} options.res NodeJS Request object (not set when client applies initialState from server)
* @param {boolean} options.debug User-defined debug mode param
* @param {string} options.storeKey This key will be used to preserve store in global namespace for safe HMR 
*/
const makeStore = (initialState, options) => {
    return createStore(reducer, initialState);
};

class MyApp extends App {

    static async getInitialProps({Component, ctx}) {

        // we can dispatch from here too
        ctx.store.dispatch({type: 'FOO', payload: 'foo'});

        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

        return {pageProps};

    }

    render() {
        const {Component, pageProps, store} = this.props;
        return (
            <Container>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </Container>
        );
    }

}

export default withRedux(makeStore)(MyApp);

然后，可以简单地连接实际的页面组件:此演示如何在页面中连接 index.js .

And then, actual page components can be simply connected: This demo how to connect index.js in pages.

import Link from "next/link";
import React from "react";
import {
  Container,
  Row,
  Col,
  Button,
  Jumbotron,
  ListGroup,
  ListGroupItem
} from "reactstrap";
import Page from "../components/page";
import Layout from "../components/layout";

import { connect } from "react-redux";

class Default extends Page {
  static getInitialProps({ store, isServer, pathname, query }) {
    store.dispatch({ type: "FOO", payload: "foo" }); // component will be able to read from store's state when rendered
    return { custom: "custom" }; // you can pass some custom props to component from here
  }
  render() {
    return (
      <Layout>content...</Layout>
    );
  }
}

export default connect()(Default);

有关更多信息，请参考文档: next-redux-wrapper

Refer to the documentation for more information: next-redux-wrapper

在next.js中使用React Redux

相关推荐