Question

我正在尝试在组件渲染之前发送get方法，以获取处于状态的数据。我正在使用reducer，如下所示：

function mainPageReducer(state = initialState, action) {
  switch(action.type) {
    case FETCH_PRODUCTS_BEGIN:
      return state
        .set('loading', true)
        .set('error', false)
        .setIn('products', false);
    case FETCH_PRODUCTS_SUCCESS:
      return state
        .setIn('products', action.products)
        .set('loading', false)
    case FETCH_PRODUCTS_FAILURE:
      return state.set('error', action.error).set('loading', false);
    default:
      return state;
  }
}

Reducer可以获取状态，并且一切看起来正常，但是当我使用此组件进入页面时，它设法达到FETCH_PRODUCTS_BEGIN状态，并且只有在渲染后才达到FETCH_PRODUCTS_SUCCESS。因此我的列表组件无法获取action.products的数据。

在组件中，我尝试同时使用componentDidMount和componentWillMount，但结果是相同的。

我的目标是在加载页面时立即加载具有列表的组件。也许有人可以建议我如何实现这一目标？

编辑：

我有ProductsList组件，可以在其中检查状态。组件达到加载状态，渲染后变为null，这意味着所有状态均为false。

function ProductsList({ loading, error, products }) {
      if (loading) {
        return <List component={LoadingIndicator} />;
      }

      if (error !== false) {
        const ErrorComponent = () => (
          <ListItem item="Something went wrong, please try again!" />
        );
        return <List component={ErrorComponent} />;
      }

      if (products !==false) {
        return <List items={products} component={Products} />;
      }
      return null;
    }

Answer 1

您需要调度成功的回调操作，例如：

function* login(action) {
  try {
    ....
    yield put({type: ACTION_TYPES.LOGIN_SUCCESS, payload:response.data});
  } catch (error) {
    yield put({type: ACTION_TYPES.LOGIN_FAILURE, error});
    yield call(alertError); // and this
  }
}

减速器：

case GET_PROFILE_SUCCESS:
      return {
        ...state,
        profile: action.payload,
        loading: false
      };

Answer 2

在传奇故事中：

yield put(FETCH_PRODUCTS_BEGIN);
yield take(FETCH_PRODUCTS_SUCCESS);
yield put(push(routes.productPage));

在ReactJS中渲染之前如何调用函数

2 个答案: