redux 中一个 action 依赖另一个 action 异步获取的数据怎么做

Question

export function getUserInfo (username: string, password: string) {
  return (dispatch: any) => {
    return fetchUser(username, password)
      .then(res => {
        dispatch({
          type: GET_USER_INFO,
          userInfo: res
        })
      })
      .catch(err => {
        console.log(err)
      })
  }
}

export function getStars (username: string, password: string) {
  return (dispatch: any, getState: any) => {
    const url = getState().url
    fetchStars(url, username, password)
      .then(res => {
        dispatch({
          type: GET_STARS,
          stars: res
        })
      })
      .catch(err => {
        console.log(err)
      })
  }
}

其中 getStars依赖 getUserInfo 返回的数据，但是我不想把 getStars 放进 getUserInfo 的 then 方法中， 那样就把两个 action 揉到一起了， 想问问大家有没有什么好的解决方案。

Answer 1

请求写成回调的形式：

export function getUserInfo (username: string, password: string, callback) {
  return (dispatch: any) => {
    return fetchUser(username, password)
      .then((res,callback) => {
        dispatch({
          type: GET_USER_INFO,
          userInfo: res
        })
        if(typeof callback === 'function')
        callback(res);
      })
      .catch(err => {
        console.log(err)
      })
  }
}

然后把后一个请求方法放在前一个请求方法的callback里

Answer 2

可以把这个过程看做组件更新的过程。state初始状态{url:'XXX',username:'',password:''},组件最开始用这个初始状态会渲染一次，当登录验证成功后，username,password会更新状态，组件的componentWillReceiveProps(nextProps)会被调用，在其中比较nextProps.username、nextProps.password和this.props.username、this.props.password是否发生了改变，发生改变说明user发生变化，再dispatch getStars这个action完成更新。