Shared state between all users

Hello,

The state of our application seems to be shared between users during hydratation from the server.

Example scenario

User A logs in and fetches his datas User B get the User A datas in his store from the HYDRATE action

Code

Here is our store.js

import { createStore, applyMiddleware } from "redux";
import { createWrapper } from "next-redux-wrapper";
import reducers from "../reducers";
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({});

const makeStore = () => createStore(reducers, composeEnhancers(applyMiddleware(thunk)));

export const wrapper = createWrapper(makeStore, { debug: false });

reducers.js

import { combineReducers } from 'redux';

import ErrorReducer from './error_reducer';
import ApplicationReducer from './application_reducer';
import { HYDRATE } from "next-redux-wrapper";

const combinedReducers = combineReducers({
  error: ErrorReducer,
  application: ApplicationReducer,
});

const allReducers = (state, action) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state,
      ...action.payload,
    };
    if (state.count) nextState.count = state.count;
    return nextState;
  }
  else {
    return combinedReducers(state, action);
  }
}

export default allReducers;

_app.js

import React from "react";
import App from "next/app";
import { wrapper } from "../utils/store";

class WrappedApp extends App {
  render() {
    const { Component, pageProps } = this.props;

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

export default wrapper.withRedux(WrappedApp);

Page example

import React, { PureComponent } from 'react';
import { connect } from "react-redux";

class Home extends PureComponent {

    static async getInitialProps() {
       ...
    }

    render() {
        ...
    }
}

const mapStateToProps = (state) => {
    return {
        ...
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        ...
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

We got this bug since we updated all our modules: next: 4.2.1 -> 10.0.9 next-redux-wrapper: 1.3.4 -> 6.0.2 react-redux: 5.0.6 -> 7.2.3 redux: 3.5.2 -> 4.0.5

Has anyone encoutered this problem before or have any idea what cause it ?

[kirill-konshin]

@kirill-konshin thanks for the quick answer!

Sorry to bother but how do I create a new instance of the store every time when it’s called?

const makeStore = () => configureStore<OurStore>({
  reducer: rootReducer,
});

[NikStepMnstr]

It has same symptoms. Also we cannot reproduce it locally, only in production/preprod after server builds up some cache probably.

Our setup:

• next: 11.0.1,
• next-redux-wrapper: 7.0.0-rc.2,
• redux: 4.0.5,
• react-redux: 7.2.3,