Javascript 将initialState中的数据与服务器中预加载的数据合并

我有这样一个状态形状（在我的postReducer上设置为initialState）：

我想通过在HTML中嵌入JSON（不过度写入

isFetching

和

hasefetched

）来设置

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

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

非巴别塔解决方案（无扩散对象）

巴别塔解决方案（带扩展对象）

您还可以使用类似于执行深度对象合并的实用程序（检查_lodash.merge方法）

更新的上下文：

您必须使用我前面解释的任何方法将预加载状态合并到rootReducer中。例如，如果使用Babel并具有使用spread object的可能性，则可以执行以下操作：

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对象的哪个属性，您可以使用上述库，或者例如，使用数字方式进行工作的库。
一种解决方案是使用所需形状创建
预加载状态
：

const preloadedState = {
    isFetching: false,
    hasFetched: false,
    items: window.__PRELOADED_LOADED_STATE__,
}

好的，这个不错。我忘了提到我正在使用
combineReducers（）
，所以这是第一个参数
createStore（）
。但是我假设原理是一样的？我假设你只有一个减速器，但是如果你有更多的减速器，解决方法是一样的。您可以将数据合并到
combineReducers（）的结果中。然后在
createStore
中使用它。您是否介意在回答中添加在
combineReducers（）
的结果中合并数据的样子？我在将数据合并到
combineReducers（）
的结果中时遇到了一些问题，因为它返回了一个函数。请用您使用combineReducers（）的代码更新您的问题，我可以尝试将其缩小一点。没错，但是在店内配置和减速机中保持状态都是有风险的。@FellowStranger在哪方面有风险？是的，我很抱歉，“风险”这个词可能是错误的。但是，当我在减速器本身中定义每个减速器的状态形状时，本能地，在另一个文件中复制iit/维护它并不明显。“但也许我想得太多了。”我想我明白你想说什么了。如果减缩器的更改方式使状态的形状不同，例如，
项
现在位于
state.foo.items
，那么您还需要更新
preload状态
。如果您提供一个。这里的“完整”是指一组最小的简化程序和操作，以充分说明问题。是的，我在写问题时考虑过这一点，但我认为这是太多的代码，也许我的案例不需要比我提供的更多。我会尽量用最少的设置来更新这个问题。“尽量简单，但不要简单。”对我来说，这意味着有时MCVE需要相当数量的代码。只要您能够证明您不能为了说明问题而将其简化，那么您就可以安全地包含所需的代码。
import posts from './reducers/posts'
import comments from './reducers/comments'

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

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

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

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

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

const preloadedState = {
    isFetching: false,
    hasFetched: false,
    items: window.__PRELOADED_LOADED_STATE__,
}