[英]Redux Reducer - Array of objects being dispatched but not being saved to state
这是新手。
我有一个通过Fetch“ GET”从ASP.NET Core API检索数据的操作。 将其发送到减速器。 调用reducer并在那一点上,当对象使其到达那里时,状态不会更新。 因此,该操作确实传递了有效载荷。 减速器接收到有效载荷,但状态未更新。 为什么?
一开始我想知道我是否必须适应它们是对象数组的事实。
viewModel中有两个数组对象和一个字符串值。
该viewModel的结构如下:
AddressLocationDropdownViewModel =一个int Id和四个字符串值。
StateViewModel =一个int Id和两个字符串值。
CompanyStateShortName =字符串。
检索到数据后,我可以在Chrome的F12选项中查看Redux工具。 状态已更改,该操作将显示有效负载,但即使已接收到有效负载,也不会更新状态。
这是收到的操作中每个列表的详细分类,并显示在redux工具的操作选项卡中。
两张图片显示了动作有效负载以及有效负载对象数组的细分。
这是三个项目响起的初始状态。
在运行完减速器并完成后,此状态为完成状态,现在显然缺少那些项目。
但是上面的操作表明它已接收到数据。
这是操作的代码。第二个提取仅在通过调用JWT将其保存到本地存储中而收到JWT之后发生。
export const requestLoginToken = (username, password) =>
(dispatch, getState) => {
dispatch({ type: REQUEST_LOGIN_TOKEN, payload: username })
const payload = {
userName: username,
password: password,
}
const task = fetch('/api/jwt', {
method: 'POST',
body: JSON.stringify(payload),
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
})
.then(handleErrors)
.then(response => response.json())
.then(data => {
dispatch({ type: RECEIVE_LOGIN_TOKEN, payload: data })
saveJwt(data)
//selectData
dispatch({ type: REQUEST_SELECT_DATA })
const token = getJwt()
const headers = new Headers({
'Authorization': `Bearer ${token}`
})
const retrieveSelectData = fetch('/api/SelectData/SelectData', {
method: 'GET',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
})
.then(handleErrors)
.then(response => response.json())
.then(selectData => {
dispatch({ type: RECEIVE_SELECT_DATA, payload: selectData })
})
})
.catch(error => {
clearJwt()
dispatch({ type: ERROR_LOGIN_TOKEN, payload: error.message })
})
addTask(task)
return task
}
这是reducer的代码:
// ******************* reducer
const initialState = {
isLoading: false,
isAuthorised: false,
username: null,
jwt: null,
SuburbPostcodeDropDownList: null,
StateDropDownList: null,
CompanyStateShortName: null,
error: null,
}
export default (state = initialState, action) => {
switch (action.type) {
case REQUEST_LOGIN_TOKEN:
return {
...state,
isLoading: true,
isAuthorised: false,
username: action.payload,
jwt: null,
error: null,
}
case RECEIVE_LOGIN_TOKEN:
return {
...state,
isLoading: false,
isAuthorised: true,
jwt: action.payload,
error: null,
}
case ERROR_LOGIN_TOKEN:
return {
...state,
isLoading: false,
isAuthorised: false,
username: null,
jwt: null,
error: action.payload,
}
case REQUEST_SELECT_DATA:
return {
...state,
isLoading: true,
isAuthorised: false,
SuburbPostcodeDropDownList: null,
StateDropDownList: null,
CompanyStateShortName: null,
error: null,
}
case RECEIVE_SELECT_DATA:
return {
...state,
isLoading: false,
isAuthorised: true,
SuburbPostcodeDropDownList: action.payload.SuburbPostcodeDropDownList,
StateDropDownList: action.payload.StateDropDownList,
CompanyStateShortName: action.payload.CompanyStateShortName,
error: null,
}
这是因为如果有列表数组等,状态需要更多设置。
如果是这样,您将如何构造化简器以处理数组对象?
您的问题很简单-在RECEIVE_SELECT_DATA
情况下,在reducer中没有正确设置action.payload
上的字段。 它们以大写字母开头,而应以小写字母开头。
这意味着它们被读取为undefined
,这意味着当您使用对象扩展语法来构建新的状态对象时,它们根本不会添加到新对象中,这就是为什么它们从状态中消失的原因。
将所有这些字段名称的首字母小写,它应该可以工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.