将 react redux 与 next.js 一起使用 [英] Using react redux with next.js

问题描述

我尝试将 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 --save 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

这篇关于将 react redux 与 next.js 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！