在react redux中一步步dispatch，对吗？

Question

假设我们有 React Redux 应用程序。应用程序从服务器获取数据并将其附加到列表中（listAppend 操作）。在获取过程中，应用程序显示加载栏（requestBegin、requestEnd 操作）。简单的例子如下

export const fetchPageNum = () => {

    return (dispatch, getState) => {
        ...
        dispatch(requestBegin())

        return fetch(url).then((response) => {

            return response.json()

        }).then((json) => {

            dispatch(pageNumSuccess(page_num))
            dispatch(listAppend(json))
            dispatch(requestEnd())

        }).catch((error) => {

            dispatch(requestEnd())
        })
    }
}

请求结束后分步派发是否正确？

Answer 1

它是正确的，技术上称为 thunk

但由于您使用的是 ES6，我会使用新的 await 关键字，最终代码可能如下所示：

export const fetchPageNum = () => {
  return async (dispatch, getState) => {
    try {
      dispatch(requestBegin())
      const response = await fetch(url)
      const json = await response.json()
      dispatch(pageNumSuccess(page_num))
      dispatch(listAppend(json))
    } catch (e) {
      // log error
    }
    dispatch(requestEnd())
  }
}

在react redux中一步步dispatch，对吗？

Step by step dispatch in react redux, is it right?

javascript

reactjs

react-redux