Javascript 如何在react redux中正确更新我的初始状态

我有一个初始状态：

export default {
  dashboards: [],
  dashboardContent: []
};

我想在行动分派后通过reducer进行更新，如下所示：

import initialState from './initialState';
import * as types from '../actions/actionTypes';

export default function dashboardContentReducer(state = initialState, action) {
  switch(action.type) {
    case types.LOAD_DASHBOARD_CONTENT_SUCCESS:
      return Object.assign({}, state, { dashboardContent: action.dashboardContent });
    default:
      return state;
  }
}

及

在分派操作后，当我查看我的商店时，我看到它已更新，但级别太深：

{
  dashboards: {
    dashboards: [/* array received from reducer */],
    dashboardContent: []
  },
  dashboardContent: {
    dashboards: [],
    dashboardContent: [/* array received from reducer */]
  }
}

我如何使其成为我的预期目标，即：

{
  dashboards: [/* payload received from reducer */],
  dashboardContent: [/* payload received from reducer */]
}

编辑：

下面是有效载荷的外观

对于仪表板内容：

[
  {
    application: 'Company News',
    site: 'Home',
    lastUpdated: 'Jun 1, 2016 10:30',
    location: 'Asbury',
    views: 123451,
    individuals: 2345
  },
  {
    application: 'Company News',
    site: 'Home',
    lastUpdated: 'Jun 1, 2016 10:30',
    location: 'Asbury',
    views: 123451,
    individuals: 2345
  },
  {
    application: 'Company News',
    site: 'Home',
    lastUpdated: 'Jun 1, 2016 10:30',
    location: 'Asbury',
    views: 123451,
    individuals: 2345
  },
  {
    application: 'Company News',
    site: 'Home',
    lastUpdated: 'Jun 1, 2016 10:30',
    location: 'Asbury',
    views: 123451,
    individuals: 2345
  },
  {
    application: 'Company News',
    site: 'Home',
    lastUpdated: 'Jun 1, 2016 10:30',
    location: 'Asbury',
    views: 123451,
    individuals: 2345
  }
];

对于仪表板：

[
  {
    id: 1,
    title: "Overview",
    template: "main",
    category: "Main",
    sort: {},
    filter: {
    loginType: "All Accounts",
    Pivot: "location",
    pivotValue: 1
    },
    priority: 0,
    readonly: true
  },
  {
    id: 2,
    title: "Top Applications",
    template: "application-usage",
    category: "Application Usage",
    sort: {
      first: {
        by: "views",
        direction: "desc"
      },
      second:  {
        By:"individuals",
        direction: "desc"
      }
    },
    filter: {
      application: 0,
      Pivot: location,
      pivotValue: 1
    },
    priority: 1,
    readonly: true,
    createdDate: "2016-12-29T16:37:11.62Z",
    updatedDate: "2016-12-29T16:37:11.62Z"
  }
]

---

您需要瞄准内部

仪表板，而不是外部仪表板。试一试

export default function dashboardReducer(state = initialState, action) {
  switch(action.type) {
    case types.LOAD_DASHBOARDS_SUCCESS:
      return Object.assign({}, state, { 
                dashboards: Object.assign({},state.dashboards,{dashboards: action.dashboards}
             });
    default:
      return state;
  }
}

及

既然您使用的是两个不同的减速机，并且您知道
初始状态
，为什么不将减速机修改为

import initialState from './initialState';
import * as types from '../actions/actionTypes';

export default function dashboardContent(state = [], action) {
  switch(action.type) {
    case types.LOAD_DASHBOARD_CONTENT_SUCCESS:
      return Object.assign({}, state, action.data);
    default:
      return state;
  }
}

另一个是

import initialState from './initialState';
import * as types from '../actions/actionTypes';

export default function dashboard(state = [], action) {
  switch(action.type) {
    case types.LOAD_DASHBOARDS_SUCCESS:
      return Object.assign({}, state, action.data);
    default:
      return state;
  }
}

嗯，我已经更改了减速机的名称，但是在使用
combinereducer
时，名称并不重要。你可以一直这样做

combineReducers({
  dashboardContent:dashboardContentReducersWhichHasBeenGivenAWeirdName,
  dashboard:dashboardReducerAgainNamedWeird
})

您的状态将被创建为
{dashboard:[]，dashboardContent:[]}

通过这种方式，您可以避免错误级别的更新。
另外，我还建议大家看一下，它详细解释了
createStore
如何基于减缩器创建状态，以及initialstate如何优先。
来自文档：

生成的reducer调用每个子reducer，并收集它们的
将结果转换为单个状态对象。状态对象的形状
匹配传递的减速器的键

因此，状态对象将如下所示：

{
  reducer1: ...
  reducer2: ...
}

因此，在使用它时，为了使两个减速器共享状态，您需要创建一个单独的减速器，如下所示：

import initialState from './initialState';
import * as types from '../actions/actionTypes';

export default function dashboardReducer(state = initialState, action) {
  switch(action.type) {
    case types.LOAD_DASHBOARDS_SUCCESS:
      return Object.assign({}, state, { dashboards: action.dashboards });
    case types.LOAD_DASHBOARD_CONTENT_SUCCESS:
      return Object.assign({}, state, { dashboardContent: action.dashboardContent });
    default:
      return state;
  }
}

或者，如果出于任何原因希望保持逻辑分离，可以使用库：

这样，您将拥有一个状态对象：

{
    dashboard: {
        dashboards: []
        dashboardContent: []
    }
}

可能动作负载不是一个数组，而是一个与初始状态形状相同的对象。事实并非如此。我将更新帖子以包含有效负载的外观。如果有效，请尝试以下代码：
returnobject.assign（{}，state，action.dashboards）不幸的是没有…您正在使用
组合减速机
？因为这将创建两个不同的状态对象，第一个是
state=[]
，第二个是
state=initialState
？另外，您怎么说组合器命名不重要？这意味着什么？@iggy2012 Sry，这是一个打字错误，把答案扩大了一点！
import initialState from './initialState';
import * as types from '../actions/actionTypes';

export default function dashboardReducer(state = initialState, action) {
  switch(action.type) {
    case types.LOAD_DASHBOARDS_SUCCESS:
      return Object.assign({}, state, { dashboards: action.dashboards });
    case types.LOAD_DASHBOARD_CONTENT_SUCCESS:
      return Object.assign({}, state, { dashboardContent: action.dashboardContent });
    default:
      return state;
  }
}

import reduceReducers from "reduce-reducers";
import dashboardReducer from "./dashboardReducer";
import dashboardContentReducer from "./dashboardContentReducer";

const combined = reduceReducers(dashboardReducer, dashboardContentReducer);

createStore(combineReducers({ dashboard: combined }));

{
    dashboard: {
        dashboards: []
        dashboardContent: []
    }
}