Question

我正在开发一个基于react + redux + thunk构建的网络应用。

我有动作创作者，如下所示。有2个异步API调用，第一个fetchUser（）将从服务器获取用户相关信息，然后fetchUserComments是另一个异步调用，它返回所有用户注释。

export function fetchUserInfoFlow () {
  return (dispatch, getState) => {
    return dispatch(fetchUser()).then(() => {
       return dispatch(fetchUserComments()
    })
  }
}

export function fetchUser() {
  return (dispatch, getState) => {
    return axios.get('urlhere')
      .then(function (response) {
      // basically fetch user data and update the store
      dispatch({type: FETCH_USERS, user:response.data)
      })
      .catch(function (error) {
        console.error(error)
      })
  }
}

export function fetchUserComment() {
  return (dispatch, getState) => {
    return axios.get('urlhere')
      .then(function (response) {

      // fetch user comments, get the user list from store, matching the user id and append the comments list to the user

      let user = {...getState().user}
      response.data.forEach(function (userComment) {
        user.forEach(function (userComment) {
           if(user.userId = userComment.userId){
                user.comments = userComment.comments
            }
        }
      }
      dispatch({type: UPDATE_USER_COMMENT, user:response.data)
      })
      .catch(function (error) {
        console.error(error)
      })
  }
}

我有几个与上述获取用户相关信息类似的动作创建者，最后更新修改商店的用户列表。

问题是当状态更新时组件没有重新渲染，怀疑我是否在某处改变了用户列表。

我已经读过几篇文章，在动作创建者中使用getSate（）应仅在几种情况下使用，不应更新其值，因为这会改变状态。

在这种情况下，我应该在哪里修改用户列表的逻辑以及如何避免改变用户列表？

非常感谢！

Answer 1

这部分应该进入你的减速器，因为这是你应该改变状态的唯一地方：

  let user = {...getState().user}
  response.data.forEach(function (userComment) {
    user.forEach(function (userComment) {
       if(user.userId = userComment.userId){
            user.comments = userComment.comments //mutating state
        }
    }
  }

在redux存储中修改数组

1 个答案: