javascript - 如何从反应组件、react-redux 中的异步函数获取数据？

问题描述

我是 redux 的新手并做出反应。我有从 api 请求调用中获取数据的 React 容器和组件。我的问题基本上是，在反应中处理 redux 的异步函数的最佳方法是什么。我需要帮助来获取反应组件中的数据。

Container.js：（不完整，这里需要帮助）

class Container extends React.Component {

  state = {
    userList: ''
  }

  componentDidMount() {
    this.props.loadUserDetails();
  }

  render() {
    return (
      <div className="app">
       <Component userList={this.state.userList}/>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  userList: state.auth.userList
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  loadUserDetails
}, dispatch);

export default withRouter(connect(
  mapStateToProps,
  mapDispatchToProps
)(Container));

Componet.js：（纯组件，这里我需要渲染数据）

class Component extends React.Component {

  render() {
    return (
      <div className="component">
       {this.props.userList}
      </div>
    );
  }
}

模块/auth/index.js

export const loadUserDetails = () => {
  return dispatch => {
    dispatch({
      type: types.LOAD_USER_REQUEST
    });
    request.get('/api/v1/auth', dispatch)
    .then(({ data }) => {
      if (data.success) {
        dispatch({
          type: types.LOAD_USER_SUCCESS
      payload: data.data
        });
      } else {
        dispatch({
          type: types.LOAD_USER_FAILURE,
          payload: data.message
        });
      }
    })
    .catch((err) => {
      dispatch({
        type: types.LOAD_USER_FAILURE,
        payload: 'Something went wrong, please try again.'
      });
    });
  };
};

模块/auth/actions.js：

export const LOAD_USER_REQUEST = 'auth/LOAD_USER_REQUEST';
export const LOAD_USER_SUCCESS = 'auth/LOAD_USER_SUCCESS';
export const LOAD_USER_FAILURE = 'auth/LOAD_USER_FAILURE';

模块/auth/reducers.js：

state ={
    loading: false,
    error: null,
    userList: null
}


case types.LOAD_USER_REQUEST: 
      return Object.assign({}, state, {
    loading: true
      });
    case types.LOAD_USER_REQUEST:
      return Object.assign({}, state, {
    loading: false,
        userList: payload,
      });
    case types.LOAD_USER_REQUEST:
      return Object.assign({}, state, {
    loading: flase,
    error: payload
      });

我实际上需要帮助来获取 Container 中的 userList 并将其传递给 Component。因为它是一个 asyc 函数，所以我无法在 Component 渲染之前获取 Container 中的数据。如何处理这种情况？

当我传入userList子组件时，我第一次没有 userList数据。所以我的问题是 Reactjs 的循环，我应该在哪里打电话loadUserList？在 componentDidMount? 还是componentDidUpdate？如果是这样，我怎样才能得到数据？

我无法在组件安装时呈现userList它的值。null如何解决这个问题？

标签： javascriptreactjsreact-nativeredux

javascript - 如何从反应组件、react-redux 中的异步函数获取数据？

问题描述

解决方案

推荐阅读