代码之家 › 专栏 › 技术社区 › Mustafa Magdy

使用redux thunk时,操作可能没有未定义的“type”属性错误

redux-thunk react-redux react-native

Mustafa Magdy · 技术社区 · 7 年前

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

在我的组件中,我 connect getData 像这样的行动

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

运行此命令会导致以下错误

2 回复 | 直到 7 年前

Charles Owen 7 年前

您需要一个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
});

Mustafa Magdy 7 年前

我应该从reduxsauce返回的action creators对象中分派操作。所以正确的选择应该是这样

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

推荐文章

Piotr Chmielowiec · 组件从一个调度发出两个api调用

4 年前

zishe · React Redux同步操作返回一些代理对象而不是字符串

8 年前

DÅ¾enis H. · 仅在刷新页面后呈现道具

8 年前

lex · reactjs减速机相关术语说明[已关闭]

8 年前

kosmicbird · 如何将异步thunk操作延迟到存储了身份验证会话令牌之后?

8 年前

John · 404使用react-routerv4从react redux应用程序中的状态呈现组件时出错?

8 年前

Juan · 与Redux thunk异步/等待。获取错误:操作必须是普通对象。对异步操作使用自定义中间件

8 年前

jsDev · 调用两个异步操作的正确方法

8 年前

samtoya · Redux异步操作getState()返回未定义?

8 年前

Adrian Florescu · Typescript Redux Thunk(类型)

8 年前