使用 redux-thunk 时，操作可能没有未定义的“类型”属性错误答案

【问题标题】：Actions may not have an undefined "type" property error when using redux-thunk使用 redux-thunk 时，操作可能没有未定义的“类型”属性错误
【发布时间】：2019-05-09 15:53:09
【问题描述】：

我正在尝试测试 redux-thunk 以进行异步调用，我创建了 3 个操作（请求、成功、失败）并创建了一个 thunk 方法来相应地返回分派的操作。

import { createReducer, createActions } from "reduxsauce";
import Immutable from "seamless-immutable";
import api from "../Services/FixtureApi";

export const INITIAL_STATE = Immutable({
  Data1: [],
  loadingData: false,
  error: null
});

const { Types, Creators } = createActions({
  requestData1: null,
  receiveData1: null,
  failedData1: null
});

export const ExampleTypes = Types;
export default Creators;

export function getData() {
  return dispatch => {
    dispatch(requestData1());
    var promise = new Promise((resolve, reject) => {
      const param1 = "";
      setTimeout(() => {
        resolve(api.getData(param1));
      }, 2000);
    });

    return promise
      .then(res => {
        dispatch(receiveData1(res.data));
      })
      .catch(err => {
        dispatch(failedData1(err.message));
      });
  };
}

export const requestData1 = state => ({
  ...state,
  loadingData: true
});
export const receiveData1 = (state, action) => ({
  ...state,
  Data1: [...state.Data1, ...action.payload],
  loadingData: false
});

export const failedData1 = (state, action) => ({
  ...state,
  loadingData: false,
  error: action.payload
});

export const reducer = createReducer(INITIAL_STATE, {
  [Types.REQUEST_DATA1]: requestData1,
  [Types.RECEIVE_DATA1]: receiveData1,
  [Types.FAILED_DATA1]: failedData1
});

在我的组件中，我connectgetData 的操作是这样的

const mapDispatchToProps = dispatch => ({
  fetchData1: () => dispatch(getData())
});

运行此程序会导致以下错误

【问题讨论】：

标签： react-native react-redux redux-thunk

【解决方案1】：

您需要一个声明所有操作类型的 ActionTypes.js 文件。例如，

export const ADD_FAVORITE = 'ADD_FAVORITE';

然后在 ActionCreators.js 文件中，引用 ActionTypes。

import * as ActionTypes from './ActionTypes';

export const postFavorite = (dishId)  => (dispatch) => {
     dispatch(addFavorite(dishId));    
};
export const addFavorite = (dishId) => ({
    type: ActionTypes.ADD_FAVORITE,
    payload: dishId
});

在我的组件中，我将在按钮 onPress 事件中调用 postFavorite。希望这个例子有所帮助。

【讨论】：

实际上，reduxsauce 正是这样做的，它使用createActions 函数声明了这些操作

【解决方案2】：

我应该从 reduxsauce 返回的动作创建者对象中分派动作。所以正确的调用应该是这样的

export function getData() {
  return async dispatch => {
    dispatch(Creators.requestData1());
    var promise = new Promise((resolve, reject) => {
      const param1 = "";
      setTimeout(() => {
        resolve(api.getData(param1));
      }, 2000);
    });

    try {
      const res = await promise;
      if (!res.ok) throw new Error(res.error);
      dispatch(Creators.receiveData1(res.data));
    } catch (err) {
      dispatch(Creators.failedData1(err.message));
    }
  };
}

【讨论】：