Question

我在SSR反应应用程序中的redux存储有问题。一切工作正常，在客户端上由window.initialState接收的服务器上创建的initialState。当我想通过store（）。getState在我的App.js

中获取当前存储时出现问题

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

当我在App.js
中执行store.getState（）时，我总是有initialState

您正在创建新的商店实例。这不会被修改，因为其他组件使用您在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实际上将其商店放到上下文中，以便内部＆＃34;连接＆＃34;组件可以访问它。你可以在这里阅读上下文。 Docs

redux存储不同步存储（）。getState（）与来自redux logger的状态

1 个答案: