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

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

redux-thunk react-redux react-native

Mustafa Magdy · 技术社区 · 6 年前

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 回复 | 直到 6 年前

Charles Owen 6 年前

您需要一个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 6 年前

我应该从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调用

2 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

2 年前

Storm28 · 错误:函数作为子函数无效。如果从渲染返回组件而不是<Component/>,则可能会发生这种情况

2 年前

Stephen Aranda · 如何使用React在前端UI上显示API响应消息?

2 年前

khalil hajri · 无效的钩子调用。钩子只能在函数组件的主体内部调用(react native)

2 年前

ShaySS · 如果我不需要将数据存储在redux存储中,我是否必须使用redux saga从API获取数据?

2 年前

arya.s · Toast错误消息在React/Redux中多次显示。如何避免?

2 年前

jack · 注销后清除redux商店

2 年前

Emm · 添加CombineReducer后无法读取未定义(读取“map”)的属性

2 年前

MariaT · 如何使用bootstrap 4在折叠菜单后面获取徽章?

6 年前