redux 存儲與來自 redux 記錄器的狀態不同步 store().getState()

Question

我在 SSR react 應用程序中遇到了 redux store 的問題。 一切正常，在服務器上創建的 initialState 由客戶端上的 window.initialState 接收。 當我想在 App.js 中通過 store().getState 獲取當前存儲時開始出現問題

創建商店.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;

服務器.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>
...

客戶端.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

您可以做的是使用屬性將第一個 store 實例傳遞給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實際上將它的存儲放在上下文中，以便內部“連接”組件可以訪問它）。 你可以在這里閱讀上下文。 文檔。

redux 存儲與來自 redux 記錄器的狀態不同步 store().getState()

問題描述

1 個解決方案

解決方案1
3 已采納 2018-02-10 15:34:18

redux 存儲與來自 redux 記錄器的狀態不同步 store().getState()

問題描述

1 個解決方案

解決方案1 3 已采納 2018-02-10 15:34:18

解決方案1
3 已采納 2018-02-10 15:34:18