اظافة redux الى مشروع nextjs

يستخدم Next.js المكون App لتهيئة الصفحات. يمكنك إبطاله والتحكم في تهيئة الصفحة.

على الرغم من أن هذا المثال التوضيحي خاص بـ next.js ، إلا أنه يجب أن يعمل مع nextjs-starter.

قم بتثبيت next-redux-wrapper:

npm install --save next-redux-wrapper

أضف ملف _app.js  إلى مسار pages/. :

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


const makeStore = (initialState, options) => {
    return createStore(reducer, initialState);
};

class MyApp extends App {

    static async getInitialProps({Component, ctx}) {

        /*
        * يمكننا عمل
        * dispatch
        * من هنا
        */
      
        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 بالصفحات.

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" }); // المكون سيتمكن من قراءة حالة المخزن عند تصييره
    return { custom: "custom" }; // يمكننا تمرير بعض الخيارات المُخصصة من هنا
  }
  render() {
    return (
      <Layout>content...</Layout>
    );
  }
}

export default connect()(Default);

راجع التوثيق الرسمي للحصول على مزيد من المعلومات: next-redux-wrapper