Javascript redux存储不同步存储（）.getState（）与来自redux记录器的状态_Javascript_Reactjs_Redux_Server Side Rendering

Javascript redux存储不同步存储（）.getState（）与来自redux记录器的状态

javascript reactjs redux

Javascript redux存储不同步存储（）.getState（）与来自redux记录器的状态,javascript,reactjs,redux,server-side-rendering,Javascript,Reactjs,Redux,Server Side Rendering,我对SSR react应用程序中的redux商店有问题。一切都很好，客户端上的window.initialState接收到服务器上创建的initialState。当我不想在App.js中逐个store（）获取当前store（）时开始出现问题 createStore.js const configureStore = preloadedState => { const store = createStore( rootReducer, preload

我对SSR react应用程序中的redux商店有问题。一切都很好，客户端上的window.initialState接收到服务器上创建的initialState。当我不想在App.js中逐个store（）获取当前store（）时开始出现问题

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;

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>
...

 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();
    }

server.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;

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>
...

 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中存储.getState（）时，我总是使用initialState

当我在App.js中存储.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')

const store=configureStore（window.\uuuu initialData\uuuuuuu）；
水合物(
.
我将存储区传递给应用程序，但当我执行store（）.getState（）时，我仍然有initialState://@krystianj您不应该执行store（）.getState（）操作
您的store
函数将在每次调用时返回新的store。相反，您应该使用this.props.store
或this.context.store
。您还可以在调用this.props.store.getState（）的准确时间获取store状态
以后可能会更改。因此，阅读state matters时的准确时间。确定-现在this.props.store.getState（）
正在工作，但如何在客户端使用store now进行操作？我可以使用dispatch吗？可以使用initialState在客户端创建新的store吗？这样我们就可以在客户端使用store（）来调度store，并通过store（）访问app中的整个组件。getState（），因为现在我使用store（）。getState（）时我创建了新的存储…我不确定我是否理解您的问题。每当ssr服务器接受新请求时，它就会创建新的存储，将其传递给组件，以某种方式填充它，然后将其序列化到窗口。\uuuu initialData\uuuuu
并将html字符串发送回客户端。客户端然后使用序列化数据创建新的存储，并将其传递给co组件。因此，序列化之前存储在服务器上的所有内容都将在客户端上可用。如果在序列化之后添加内容，客户端将看不到它。如果客户端更改内容，服务器将看不到它（过程是单向的）。