Сброс магазина Redux при изменении маршрута самостоятельно с помощью nextJS - PullRequest
Новая
       56

Сброс магазина Redux при изменении маршрута самостоятельно с помощью nextJS

1 голос
/ 25 февраля 2020

Здравствуйте, у меня проблема с Redux и Next JS, когда я захожу в приложение с помощью API, информация о моем пользователе отлично сохраняется в хранилище redux, благодаря reduxApiMiddleware, но когда я перезагрузите мой браузер или измените маршрут, чтобы мой магазин вернулся в исходное состояние: /.

Я действительно не нашел способа решить эту проблему, я попытался использовать redux-persist и все, но ничего не работает

вот мой _app. js файл: 

 // pages/_app.jsx
import React from "react";
import {createStore,applyMiddleware} from "redux";
import {Provider} from "react-redux";
import App,{Container} from "next/app";
import withRedux from "next-redux-wrapper";
import reducer from '../redux/reducers/index'
import { apiMiddleware } from "redux-api-middleware";
import { PersistGate } from 'redux-persist/integration/react';


/**
* @param {object} initialState The store's initial state (on the client side, the state of the server-side store is passed here)
* @param {boolean} options.isServer Indicates whether makeStore is executed on the server or the client side
* @param {Request} options.req Node.js `Request` object (only set before `getInitialProps` on the server side)
* @param {Response} options.res Node.js `Response` object (only set before `getInitialProps` on the server side)
* @param {boolean} options.debug User-defined debug flag
* @param {string} options.storeKey The key that will be used to persist the store in the browser's `window` object for safe HMR
*/

const createStoreWithMiddleware = applyMiddleware(apiMiddleware)(createStore);

export function configureStore(initialState,options) {
    return createStoreWithMiddleware(reducer, initialState);
  }


class MyApp extends App {
    static async getInitialProps({Component, ctx}) {
        // We can dispatch from here too
        // ctx.store.dispatch({type: 'FOO', payload: 'TOTO'});

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

        return {pageProps};
    }

    render() {
        const {Component, pageProps, store} = this.props;
        return (
                <Provider store={store}>
                        <Component {...pageProps} />
                </Provider>
        );
    }   
}
export default withRedux(configureStore)(MyApp);

А чтобы подключить компонент или страницу к моему магазину, я так и делаю: 

export default connect(state=>state)(Register)
...