Действия могут не иметь неопределенной ошибки типа "type" при использовании redux-thunk

Question

Я пытаюсь протестировать 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
});

в моем компоненте я connect действие getData, подобное этому

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

, запускающее эту причину, вызывает следующую ошибку

Answer 1

Я должен отправить действие от объекта создателей действия, возвращаемого 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));
    }
  };
}

Answer 2

Вам нужен файл 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
});

В моем компоненте я собираюсь вызвать postFavorite при событии onPress кнопки,Надеюсь, этот пример поможет.