gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:43:38 28 4
gpt4 key购买 nike

我有一个初始状态:

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

在调度 Action 之后,当我查看我的商店时,我看到它已经更新,但是一层太深了:

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

最佳答案

既然你使用了两个不同的 reducer,而且你知道 initialState ,为什么不把你的 reducers 修改为

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 如何优先。

关于javascript - 如何在 react-redux 中正确更新我的 initialState,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41758428/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com