订阅反应组件中的redux动作

问题描述 投票:3回答:3

我有一个异步thunk从Web服务获取一些信息,它可以调度三种类型的操作

FETCH_REQUESTED
FETCH_SUCCEEDED
FETCH_FAILED

最后,如果它成功了;它返回实际响应或错误对象。

我有一个组件应该检测操作是否失败,最好是通过订阅FETCH_FAILED操作并根据错误类型显示错误消息(404/401和其他状态代码)

export const fetchData = () => {
    return async (dispatch, getState) => {
        const appState = getState();

        const { uid } = appState.appReducer;

        await dispatch(fetchRequested());

        try {
            const response = await LookupApiFactory().fetch({ uid });

            dispatch(fetchSucceeded(response));

            return response;
        } catch (error) {
            dispatch(fetchFailed());

            return error;
        }
    }
}

我对还原和反应很新,所以我有点不确定我是否朝着正确的方向前进,任何帮助都会受到赞赏。

reactjs react-native redux react-redux redux-thunk
3个回答
2
投票

要实现适当的redux回调和存储机制,您应该有一个商店来保存所有数据,

const store = createStore(todos, ['Use Redux'])

然后,你将数据发送到商店,

store.dispatch({
  type: 'FETCH_FAILED',
  text: reposnse.status //Here you should give the failed response from api
});

然后,您可以使用订阅功能从任何组件中的商店获取值。每次调度操作时都会调用它,并且状态树的某些部分可能已经更改。

store.subscribe(()=>{
  store.getState().some.deep.property
})

这是Redux的一个简单实现。随着您的应用程序变得越来越复杂,您需要将还原功能拆分为单独的功能,每个功能使用combineReducers管理状态的独立部分。您可以从redux.js site获得更多信息


0
投票

最常见的方法是使用connect库中的react-redux函数。这是一个订阅状态变化的HoC。看一下这个库,另外它允许你将你的动作创建者绑定到dispatch,这使你能够从组件中调度你的动作。

你可以像这样使用它:

import React from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ data, error }) => (
  <div>
    {error && (
      <span>Error occured: {error}</span>
    )}

    {!error && (
      <pre>{JSON.stringify(data, null, 2)}</pre>
    )}
  </div>
);

const mapStateToProps = (state) => ({
  data: state.appReducer.data,
  error: state.appReducer.error
});

export default connect(mapStateToProps)(MyComponent);

您可以在jsx中使用条件渲染,如上所示,或使用guard子句,如下所示:

const MyComponent = ({ data, error }) => {
  if (error) {
    return (
      <span>Error occured: {error}</span>
    );
  }

  return (
    <pre>
      {JSON.stringify(data, null, 2)}
    </pre>
  );
}

0
投票

假设减速器,

对于FETCH_FAILED动作,你可以放一些有意义的标志,表示有一些失败。基于该标志你可以显示错误信息或做其他动作。

const testReducers =(state,actione)=>{

    case 'FETCH_FAILED' : {

        return {
            ...state,{ error_in_response : true }
        }
    };

    default : return state;
}

在容器中,您可以获取该标志并将其传递给组件。

假设combineReducers用于组合减速器;

const mapStateToProps=(state)=>{

    return {
        error_in_response : state.testReducers.error_in_response
    }
}
connect(mapStateToProps)(yourComponent)

在您的组件中,可以使用this.props.error_in_response访问它

© www.soinside.com 2019 - 2024. All rights reserved.