Question

我是React和Redux的初学者，在我获取第一个API调用以获取一些信息以进行应用渲染之前（例如，如果用户已登录，其他一些数据）

我已经有了使用Redux和React-Router的React App。我需要在渲染HomePage之前创建一些加载屏幕。在我收到API的响应之前，此加载屏幕将一直处于活动状态。得到回复后，我会将它们分派到商店并禁用加载屏幕。

我在这里找到了我需要它的示例：https://boss.gg/（他们也使用React）

Answer 1

将您的操作划分为不同的状态：未决，成功，错误。当您的请求待处理时，您的组件可以显示一个加载屏幕，当请求得到满足或出现错误时，该屏幕将被替换。借助redux-thunk，您可以创建asyc动作。

用某种伪代码可以这样工作：

您的actionTypes：

export const GET_EXAMPLE_ERROR = 'GET_EXAMPLE_ERROR':
export const GET_EXAMPLE_SUCCESS = 'GET_EXAMPLE_SUCCESS':
export const GET_EXAMPLE_PENDING = 'GET_EXAMPLE_PENDING':

您的操作

export function getExampleSuccess(payload) {
  return {
    type: exampleActionTypes.GET_EXAMPLE_SUCCESS,
    payload,
  };
}
export function getExampleError(error) {
  return {
    type: exampleActionTypes.GET_EXAMPLE_ERROR,
    error,
  };
}
export function getExamplePending() {
  return {
    type: exampleActionTypes.GET_EXAMPLE_PENDING,
  };
}
export function getExample() {
  return async dispatch => {
    dispatch(getExamplePending());
    try {
      const result = await exampleService.getData();
      dispatch(getExampleSuccess(result));
    } catch (error) {
      dispatch(getExampleError(error));
    }
  };
}

您的减速器：

export default function exampleReducer(state = initialState.example, action) {
  switch (action.type) {
    case exampleActionTypes.GET_EXAMPLE_ERROR:
      return {
        ...state,
        example: {
          ...state.example,
          error: action.error,
          pending: false,
        },
      };
    case exampleActionTypes.GET_EXAMPLE_SUCCESS:
      return {
        ...state,
        example: {
          ...state.example,
          result: action.payload,
          pending: false,
        },
      };
    case exampleActionTypes.GET_EXAMPLE_PENDING:
      return {
        ...state,
        example: {
          ...state.example,
          error: null,
          pending: true,
        },
      };

    default:
      return state;
  }
}

您的组件：

class ExampleComponent extends React.Component {

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

    render() {
        if( this.props.pending ) {
            return <Loader />;
        }

        return <div>Your component</div>
    }
}

const mapStateToProps => ({
    pending: state.example.pending
});

const mapDispatchToProps => ({
    getExample
})

export default connect(mapStateToProps, mapDispatchToProps)(ExampleComponent)

请注意，这是单个呼叫的示例。您的待处理状态可以是Redux存储区不同部分的多个待处理状态的组合。

在获取API调用之前反应加载屏幕

1 个答案: