Question

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

ORDER BY foo = 'A' DESC, foo ASC

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

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

FETCH_FAILED

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

Answer 1

要实现正确的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

获取更多信息

Answer 2

假设减速器，

对于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

访问此组件

Answer 3

最常见的方法是使用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>
  );
}

订阅反应组件中的redux动作

3 个答案: