Как лучше всего обслуживать один и тот же магазин Redux на разных страницах в Next JS?

Question

Из того, что я понимаю, каждый запрос к серверу рассматривается как новый клиент, поэтому обслуживается новое хранилище с избыточностью. Как лучше всего обслуживать одно и то же хранилище резервов одному клиенту?

Проблема: Если клиент изменяет значение состояния избыточности на одной странице, а затем решает набрать в URL-адресе для другой страницы сервер предоставляет клиенту другую страницу с новым хранилищем резервов (если вы используете функциюact-redux connect)

Это лучший способ решить эту проблему, чтобы сохранить состояние избыточности в локальном хранилище, а другая страница использует постоянное состояние избыточности для повторного увлажнения хранилища избыточности? Как бы это взаимодействие выглядело с Next JS, поскольку сервер не имеет доступа к локальному хранилищу или это не имеет значения?

В моем конкретном случае я пытаюсь увеличить счетчик на Страница индекса и клиент получает это же значение, когда они переходят к /countervalue. Часть Redux этого приложения работает должным образом, если я перехожу на страницу /countervalue с помощью Next Link, то она работает, но я пытаюсь, чтобы она служила тому же значению, когда клиент вводит путь к /countervalue

_app. js

import App from 'next/app';
import {Provider} from 'react-redux';
import React from 'react';
import withRedux from 'next-redux-wrapper';
import {initStore} from '../redux/store';
import store from '../redux/store';

class MyApp extends App {

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

        //Anything returned here can be access by the client
        return {pageProps: pageProps};
    }

    render() {
        //Page props that were returned  from 'getInitialProps' are stored in the props i.e. pageprops
        const {Component, pageProps, store} = this.props;

        return (
            <Provider store={store}>
                <Component {...pageProps}/>
            </Provider>
        );
    }
}

//withRedux wrapper that passes the store to the App Component
export default withRedux(() => store)(MyApp);

index.jsx

import React from 'react';
import {connect} from 'react-redux';
import {decrementCounter, incrementCounter} from '../redux/actions/counterActions';
import Link from 'next/link';

class App extends React.Component {

    static getInitialProps({store}) {
    }

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <button onClick={this.props.incrementCounter}>Increment</button>
                <button onClick={this.props.decrementCounter}>Decrement</button>
                <h1>{this.props.counter}</h1>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    counter: state.counter.value
});

const mapDispatchToProps = {
    incrementCounter: incrementCounter,
    decrementCounter: decrementCounter,
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

countervalue.jsx

import React from 'react';
import {connect} from 'react-redux';

class CounterValue extends React.Component {

    constructor(props) {
        super(props);
    }

    static getInitialProps({store}) {
    }

    render() {
        return (
            <h1>{this.props.counter.value}</h1>
        );
    }
}

export default connect(state => state, null)(CounterValue);

store. js

import {createStore} from 'redux';
import rootReducer from './reducers/rootReducer';

const store = createStore(rootReducer);

export default store;

rootreducer. js

import counterReducer from './counterReducer';
import {combineReducers} from 'redux';

const rootReducer = combineReducers({
    counter: counterReducer
});

const counterReducer = (state = {value: 0}, action) => {
    switch (action.type) {
        case INCREMENT_COUNTER:
            return {...state, value: state.value + 1};
        case DECREMENT_COUNTER:
            return {...state, value: state.value - 1};
        default:
            return {...state};
    }
};
export default rootReducer;