javascript - 如何在react-redux中正确更新我的initialState

Question

我有一个初始状态:

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

我想在 Action 分派(dispatch)后通过 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;
  }
}

和

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 });
    default:
      return state;
  }
}

分派(dispatch)操作后，当我查看我的商店时，我发现它已更新，但一层太深了:

{
  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"
  }
]

Answer 1

既然您使用了两个不同的 reducer ，并且您知道 initialState ，为什么不将 reducer 修改为

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

嗯，我已经更改了 reducer 的名称，但是在使用combineReducers时，命名并不重要。正如您随时可以做的那样。

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

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

通过这种方式，您可以避免错误级别的更新。 我还建议您查看 explanation here by Dan ，它详细解释了 createStore 如何根据您的 reducer 创建状态，以及 intialState 如何优先。