[英]i am new to redux and react i am trying to update the nested state in REDUX store, but unable to sort it out
where am i missing?我在哪里失踪? please help in sorting this out _/_ i have trouble in updating the redux store state correctly without breaking
请帮助解决这个问题_/_ 我在更新 redux 商店 state 时遇到问题而不会损坏
This is my current state in redux store state before posting the data这是我在发布数据之前在 redux 商店 state 中的当前 state
next state Object {
"highlights": Object {
"errMess": null,
"highlights": Array [],
"isLoading": true,
},
"posts": Object {
"errMess": null,
"isLoading": false,
"posts": Array [
Object {
"__v": 0,
"_id": "5f37c3ebc8cb6a46c89bc33c",
"by": Object {
"_id": "5ed8d7fcfd3da42bc426992a",
"name": "mad",
"username": "mad",
},
"content": "this is first post",
"contentWarn": false,
"createdAt": "2020-08-15T11:15:55.986Z",
"flaged": false,
"heading": "first pot",
"report": 0,
"updatedAt": "2020-08-15T11:15:55.986Z",
},
],
},
}
then add new post action is performed using reducer====>然后使用reducer执行添加新的post操作====>
export const posts = (
state = { isLoading: true, errMess: null, posts: [] },
action
) => {
switch (action.type) {
case ActionTypes.UPDATE_POSTS:
return {
posts: state.posts.posts.concat(action.payload),
};
default:
return state;
}
};
this is the error returned这是返回的错误
action Object {
"payload": [TypeError: undefined is not an object (evaluating 'state.posts.posts.concat')],
"type": "UPDATE_POSTS_FAILED",
}
undefined is not an object (evaluating 'state.posts.posts.concat')
* Redux\posts.js:24:13 in posts
this is the result i wanted to happen这是我想要发生的结果
next state Object {
"highlights": Object {
"errMess": null,
"highlights": Array [],
"isLoading": true,
},
"posts": Object {
"errMess": null,
"isLoading": false,
"posts": Array [
Object {
"__v": 0,
"_id": "5f37c3ebc8cb6a46c89bc33c",
"by": Object {
"_id": "5ed8d7fcfd3da42bc426992a",
"name": "mad",
"username": "mad",
},
"content": "this is first post",
"contentWarn": false,
"createdAt": "2020-08-15T11:15:55.986Z",
"flaged": false,
"heading": "first pot",
"report": 0,
"updatedAt": "2020-08-15T11:15:55.986Z",
},
Object {
"__v": 0,
"_id": "5f37c3ebc8cb6a46c89bc33c",
"by": Object {
"_id": "5ed8d7fcfd3da42bc426992a",
"name": "mad",
"username": "mad",
},
"content": "this is second post",
"contentWarn": false,
"createdAt": "2020-08-15T11:15:55.986Z",
"flaged": false,
"heading": "second post",
"report": 0,
"updatedAt": "2020-08-15T11:15:55.986Z",
}
],
},
}
Your reducer should have this structures with two level posts:你的 reducer 应该有这样的结构,有两个级别的帖子:
export const posts = (
state = {
highlights: {
errMess: null,
highlights: [],
isLoading: true,
},
posts: { isLoading: true, errMess: null, posts: [] },
},
action
) => {
switch (action.type) {
case ActionTypes.UPDATE_POSTS:
return {
...state,
posts: state.posts.posts.concat(action.payload),
};
default:
return state;
}
};
and try to keep the same data structure in the state, like highlights !并尽量在 state 中保持相同的数据结构,就像亮点一样!
return {
...state,
posts: state.posts.concat(action.payload),
}
this reducer worked Note: I am using highlight reducer in separate file这个reducer工作注意:我在单独的文件中使用highlight reducer
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.