订阅反应组件中的redux动作

时间:2018-05-24 08:54:36

标签: reactjs react-native redux react-redux redux-thunk

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

ORDER BY foo = 'A' DESC, foo ASC

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

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

FETCH_FAILED

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

3 个答案:

答案 0 :(得分: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

获取更多信息

答案 1 :(得分: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

访问此组件

答案 2 :(得分:0)

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

你可以像这样使用它:

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>
  );
}