javascript - 我如何将操作信息传递给组件、React + Redux？

Question

因此，我正在 Action.js 上执行 API 请求，完成后，将“成功”参数发送到调用该操作的组件。

最好的方法是什么？

我的代码:

Action.js

export const setarLojas = (lojas) =>{
    return {
      type: SETAR_LOJAS,
      data: lojas
    }
  }

  export const carregarLojas = () => {
    return (dispatch) => {
      return API.get('loja')
      .then(response => {
        dispatch(setarLojas(response.data))

        // Example
        // return "success"
      })
      .catch(error => {
        throw(error);
      })
    }
  }

组件.js

componentDidMount(){
      this.props.carregarLojas();

      // Example
      // if(this.props.carregarLojas == "success") { alert("success") }
    }

Answer 1

您可以使用与您的操作相关的状态(除了您的数据之外，还作为您的 reducer 中的状态)；

setarLojas: {
      data: actionData, 
      status: actionStatus
}

然后根据您的操作结果更改您的状态值，

用于状态状态的示例值:'request' | '错误'| '超时' | “成功”。

示例操作:

export const setarLojas = (lojas, status) =>{
   return {
      type: SETAR_LOJAS,
      data: lojas,
      status: status
   }
 }

export const carregarLojas = () => {
    return (dispatch) => {
      dispatch(setarLojas({}, 'request'));
      return API.get('loja')
      .then(response => {
        dispatch(setarLojas(response.data, 'success'));
      })
      .catch(error => {
         dispatch(setarLojas({}, 'error'));
         throw(error);
      })
    }
  }

在您的组件中，使用 connect hoc 将其连接到 redux 后，您可以获得如下数据:

const mapStateToProps = state => ({
     setarLojasData: state.YOUR_REDUCER.getIn(['setarLojasData', 'data']), 
     setarLojasStatus: state.YOUR_REDUCER.getIn(['setarLojasData', 'status'])
})

现在，您已经有了描述操作结果的状态，并且根据其值，您可以管理 View 然后使用数据。