Question

我有一个图标，点击它会触发一个调用API然后调度操作的功能，从状态中删除一篇博文。但问题是我的UI不会重新渲染。但是，如果我刷新浏览器，我删除的帖子就不再存在，而且我的商店与州匹配。

以下是我调用API然后调度操作的函数：

export function deletePost(postID) {
   return (dispatch) => {
      fetch(`${url}/posts/${postID}`, { method: 'DELETE', headers})
      .then((response) => response.json())
      .then((postID) =>  dispatch(removePost(postID)))
      .catch((error)=>{console.log('dispatch error',error)});
 };

以下是操作：

export function removePost ( postID ) {
 return {
  type: REMOVE_POST,
  postID,
 }
}

这是我的 reducer ：

function posts (state = {}, action) {
   switch (action.type) {
    case REMOVE_POST:
     return [
              ...state.filter((post)=>post.id!==action.postID)                  
           ];      
    default:
     return state
   }
 }

现在我只是在不调用 API

的情况下发送动作
export function deletePost(postID) { return (dispatch) => { dispatch(removePost(postID)); }

我的状态已正确更新，但我的redux商店当然不是。当我在调度前面显示的操作之前调用API时，console日志也没有错误。

这可能是什么问题？我是ReactJS的新手，经过多次尝试后无法找到解决此问题的解决方案。

Answer 1

我有几个问题，但首先：我认为问题在于：

[
  ...state.filter((post)=>post.id!==action.postID)                  
]

州的形状是什么？是state = [post1, post2, ...]吗？我可以看到初始状态为{}，因此我觉得调用state.filter而不是state.posts.filter或其他任何内容都很奇怪。

另一个可能有问题，是post.id !== action.postID，可能是收到的ID是number类型，也许本地id是string？也许相反？

Answer 2

如果您使用发送的操作执行异步副作用，则应使用redux-saga或redux-thunk。 @ cfraser的帖子中的所有内容都是正确的，你应该让你的初始状态代表你的状态实际上是什么样的。

Redux商店与州不匹配

2 个答案: