为什么我的 redux 状态在发送后没有更新

Question

我正在使用 react with redux-thunk，当我调度操作来调用 api 我可以在 redux 开发工具中看到数据更新，但它没有在组件上呈现。

我的操作：

 export const fetchPosts = () => async(dispatch) => {
try {
    const {data} = await API.fetchPosts();
    dispatch({
        type: "FETCH_POSTS",
        payload: {
            posts: data.posts
        },
      });

  } catch (error) {
    console.log(error)
  }
  }

减速器：

const postsReducers = (state = [], action) => {
switch (action.type) {
case "FETCH_POSTS":
    state.push(...action.payload.posts);
  return state;

default:
  return state;
 }
};

export default postsReducers;

组件：

const Home = () => {
const dispatch = useDispatch();
const posts = useSelector(state => state.posts);

useEffect(() => {
  if(!posts.length){
    dispatch(fetchPosts())
     console.log(posts.length) //returns 0
  }
}, [dispatch, posts]);

....
}

我可能遗漏了什么？

Answer 1

除非您使用新的 redux 工具包，否则 redux 要求您不要改变状态。

与其推送状态并返回变异状态，不如尝试使用展开运算符创建一个新数组，如下所示：

return [...state, ...action.payload.posts];

为什么我的 redux 状态在发送后没有更新

Why is my redux state not updating after dispatch

reactjs

redux

redux-thunk