redux 存储与 redux 记录器的状态不同步 store().getState()

Question

我在 SSR React 应用程序中遇到 redux 存储问题。一切正常，在服务器上创建的 initialState 由 window.initialState 在客户端接收。当我想在 App.js

中通过 store().getState 获取当前商店时出现问题

createStore.js

const configureStore = preloadedState => {

    const store = createStore(
        rootReducer,
        preloadedState || global.__initialData__,
        applyMiddleware(
            promiseMiddleware(),
            thunk,
            // logger
        )
    );

    if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('./reducers', () => {
            const nextRootReducer = require('./reducers/index');
            store.replaceReducer(nextRootReducer);
        });
    }
    return store;
}

export default configureStore;

server.js

const stores = createStore( reducers );
stores.dispatch(setLang( serve_lang )); // 'pl'
global.__initialData__ = stores.getState();
let initialDatas = stores.getState();
const store = configureStore( initialDatas );
...
<html>
<script>window.__initialData__ = ${serialize(initialDatas)}</script>
...

client.js

 const store = configureStore(window.__initialData__);

    hydrate(
      <Provider store={store} key={Math.random()}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
    </Provider>,
  document.getElementById('root')
    );

    if (module.hot) {
      module.hot.accept();
    }

在我的 App.js 中，我想在

之前获得我当前的商店

import store from 'configureStore'l
store().getState();

当我在 App.js

中执行 store.getState() 时，我总是有 initialState

Answer 1

and I always have initialState when I do store.getState() in App.js

您正在创建一个新的商店实例。这不会被修改，因为您的其余组件使用您在 client.js

中创建的另一个组件

import store from 'configureStore'l
store().getState(); // this is new store not the one you have passed to Provider

您可以做的是使用属性将第一个商店实例传递给 client.js 内的 App。

const store = configureStore(window.__initialData__);

hydrate(
  <Provider store={store} key={Math.random()}>
    <BrowserRouter>
      <App store={store}/>
    </BrowserRouter>
</Provider>,
document.getElementById('root')

或者通过上下文访问它（Provider 实际上将其存储到上下文中以便内部 "connected" 组件可以访问它）。您可以在此处阅读有关上下文的信息。 Docs.

redux 存储与 redux 记录器的状态不同步 store().getState()

redux store out of sync store().getState() with state from redux logger

javascript

reactjs

redux

server-side-rendering