服务器上的 Redux getState returns initialState

Question

我正在构建同构 React 应用程序，当用户发送请求时会执行以下任务：

1) 假设用户点击 /about-us，react-routers matchPath 找到合适的组件并 returns 它。
2) 名为 fetchData 的静态函数被调用，它调度一个动作 aboutPageContent()。 3) 一旦在服务器上解决了 promise，就会调用 getState 以获得更新的状态，但是它return是 aboutPage 的初始状态，而不是新更新的状态 .

Reducer gets a response but does not return a new state. (this happens only when action is dispatched by server).

服务器 returns 上的 getState：

{
   aboutUs:{
      founders:[{}]
      story: ""
   }
}

但应该 return:

{
  aboutUs:{
    founders:[{name: 'abc'}]
    story: "some random story"
  }
}

server.js

app.get("*", (req, res) => {

const memoryHistory = createMemoryHistory(req.url)
const currentRoute = routes.find(r => matchPath(req.url, r))
const store = configureStore({}, memoryHistory)

if (currentRoute && currentRoute.component.fetchData) {

    Promise.all(currentRoute.component.fetchData(store, req.url)).then(() => {

        const content = (
            <StaticRouter location={req.url} context={{}}>
                <Provider store={store}>
                    <App />
                </Provider>
            </StaticRouter>
        )

        const htmlContent = renderToString(content)

        const preloadedState = store.getState() <----- Returns initialState and not the updated state.

        const html = renderToStaticMarkup(<HtmlDocument html={htmlContent} preloadedState={preloadedState} />)

        res.status(200)
        res.send(html)
    })
}
})

aboutPageContainer.jsx

 static fetchData = (store) => [store.dispatch(aboutPageContent())]

preloadedState 被分配给 window.__data。 window.__data 在 client.js 上被调用以加载客户端存储。

我做错了什么吗？这是我的第一个反应同构应用程序。

Answer 1

我认为您需要在此处订阅商店才能获得如下更新。使用 store.subscribe 将确保您获得更新后的状态。希望能帮助到你。阅读 http://redux.js.org/docs/api/Store.html#subscribelistener

 store.subscribe(() => {
 // When state will be updated(in this case, when items will be fetched), this is how we can get updated state.                    
  let items= store.getState().items;
              })

服务器上的 Redux getState returns initialState

Redux getState returns initialState on server

javascript

reactjs

isomorphic-javascript

redux