javascript - 将 initialState 中的数据与来自服务器的预加载数据合并

Question

我有这样的状态形状(在我的 postReducer 上设置为 initialState):

{
  posts: {
    isFetching: false,
    hasFetched: false,
    items: []
  }
}

我想通过在 HTML 中嵌入 JSON 来设置 items 数组，其中包含在初始渲染时预加载的数据(无需覆盖 isFetching 和 hasFetched ):

<script>
  window.__PRELOADED_STATE__ = ${JSON.stringify(array_with_posts)}
</script

Redux 文档指南 recommends像这样处理预加载的数据:

const preloadedState = window.__PRELOADED_STATE__
delete window.__PRELOADED_STATE__
const store =  createStore(
    rootReducer, preloadedState,
    composeWithDevTools(middleware)
);

但这会覆盖我的整个状态形状，只用 items 数组。

在运行应用程序时设置状态，Redux 数据流对我来说是可以理解的，并且只设置一部分状态就可以正常工作。但是，如何在启动 Redux 时只设置部分带有预加载数据的状态？

更新

对于上下文，目前我在创建商店时使用 combineReducers():

import posts from './reducers/posts'
import comments from './reducers/comments'

const rootReducer = combineReducers({
  posts,
  comments
});

const store = createStore(
  rootReducer,
  composeWithDevTools(middleware)
);

Answer 1

考虑到您的预加载状态是您所说的数组，您可以合并结果并将其用作初始存储。

非 Babel 解决方案(无传播对象)

const preloadedState = window.__PRELOADED_STATE__
delete window.__PRELOADED_STATE__
const preMerge = Object.assign({}, counterApp.posts, { items: preloadedState });
const merge = { posts: preMerge };
const store = createStore(merge);

Babel 解决方案(带传播对象)

const preloadedState = window.__PRELOADED_STATE__
delete window.__PRELOADED_STATE__
const merge = {
  posts: {
    ...counterApp.posts,
    items: preloadedState,
  },
};
const store = createStore(merge);

您还可以使用类似 _lodash 的实用程序进行深度对象合并(检查 _lodash.merge 方法)。

更新的上下文:

您必须使用我之前解释的任何方法将预加载状态合并到 rootReducer 中。例如，如果使用 Babel 并且有可能使用 spread 对象，你可以这样做:

import posts from './reducers/posts'
import comments from './reducers/comments'

const rootReducer = combineReducers({
  posts,
  comments
});

const preloadedState = window.__PRELOADED_STATE__
delete window.__PRELOADED_STATE__
const preloadStateMergedIntoRootReducer = {
  ...rootReducer,
  posts: {
    ...rootReducer.posts,
    items: preloadedState,
  },
};

const store = createStore(
  preloadStateMergedIntoRootReducer,
  composeWithDevTools(middleware)
);

如我之前所述，您还有其他选择。如果您不想计算需要传播的 rootReducer 对象的哪个属性并动态地进行深度合并，您可以使用上述 _lodash 或例如 Inmutable.js 等库。动态地为您完成工作。