为何在dispatch括号内调用getPosts()？dispatch在此处的工作机制是什么？

相关代码片段 #

export const getPosts = () => dispatch => {
  dispatch(setPostLoading());
  axios
    .get('/api/posts')
    .then(res => {
      dispatch({
        type: GET_POSTS,
        payload: res.data
      })
    })
    .catch(err =>
      dispatch({
        type: GET_POSTS,
        payload: null
      })
    );
};

export const addLike = id => dispatch => {
  axios
    .post(`/api/posts/like/${id}`)
    .then(res => { 
      dispatch(getPosts())
    })
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

疑问解答 #

为什么要在dispatch括号内调用getPosts()？

用户点击点赞按钮后，后端已经更新了对应帖子的点赞数据，但前端Redux Store里存的还是旧的帖子列表。调用getPosts()的目的是重新从后端拉取最新的全量帖子数据，确保前端页面展示的点赞数和后端数据保持一致，完成页面状态的同步更新。

此处dispatch的具体工作机制

首先要明确：getPosts()是一个基于Redux Thunk中间件的异步Action——它返回的不是普通的Action对象，而是一个接收dispatch参数的函数，这也是Redux处理异步逻辑的常用方式。

当在addLike的请求成功回调里执行dispatch(getPosts())时，流程是这样的：

1. Redux Thunk中间件识别到传入的是函数（而非普通Action对象），会自动把Redux的dispatch方法作为参数传给这个函数。
2. getPosts()内部先执行dispatch(setPostLoading())，触发一个同步Action，把Store里的加载状态设为true（通常用来展示加载动画）。
3. 发起axios GET请求到/api/posts，拉取最新的帖子列表数据。
4. 请求成功后，dispatch一个type: GET_POSTS的Action，把后端返回的最新帖子数据作为payload更新到Redux Store中。
5. 前端组件通过监听Redux Store的状态变化，自动重新渲染页面，展示更新后的点赞数。

内容的提问来源于stack exchange，提问作者Ashik Ghosh