web-dev-qa-db-fra.com

Utilisation de react redux avec next.js

J'essaie d'utiliser Redux avec next.js starter project et j'ai installé next-redux-wrapper sur le projet mais je ne sais pas où se trouve le fichier racine dans ce projet.

J'essaie de suivre le tutoriel qui s'affiche sur le next-redux-wrapper mais sans succès. Rien ne change.

Aidez-moi à ajouter Redux au projet.

Cordialement.

javascriptreactjsreduxnext.js
9
Giffary

Next.js utilise le composant App pour initialiser les pages. Vous pouvez le remplacer et contrôler l'initialisation de la page.

Bien que cette démo soit pour next.js, elle devrait fonctionner pour nextjs-starter.

installez next-redux-wrapper:

npm install --save next-redux-wrapper

Ajoutez _app.js fichier vers ./pages répertoire: 

// 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);

Et puis, les composants de page réels peuvent être simplement connectés: Cette démo comment connecter index.js en 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);

Référez-vous à la documentation pour plus d'informations: next-redux-wrapper

2
shmotam