redux-thunk: действия должны быть простыми объектами - PullRequest
Новая
       13

redux-thunk: действия должны быть простыми объектами

0 голосов
/ 02 июля 2019

Я пытался использовать redux и redux-thunk, чтобы помочь получить файл json из API, и получаю предупреждение о том, что action must be a plain object. Я действительно смущен относительно того, где проблема в коде. Я пытался следить за многими другими сообщениями от stackoverflow и парой руководств в Интернете и не совсем понял, где я иду не так. Я понимаю, что это проблема с тем, как я ссылаюсь на async и dispatch, но не знаю, как это исправить.

Эта функция вызывает предупреждение в симуляторе 

export const fetchData = url => {
  console.log("Should enter async dispatch");
  return async (dispatch) => {
    dispatch(fetchingRequest());
    fetch("https://randomuser.me/api/?results=10")
      .then(response => {
        if (response.ok) {
          let json = response.json();
          dispatch(fetchingSuccess(json));
          console.log("JSON", json);
        }
      })
      .catch(error => {
        dispatch(fetchingFailure(error));
        console.log("Error", error);
      });
  };
};

Вот вывод в консоли 

Possible Unhandled Promise Rejection (id: 0):
Error: Actions must be plain objects. Use custom middleware for async actions.
Error: Actions must be plain objects. Use custom middleware for async actions.

Редактировать: включая установку промежуточного программного обеспечения

У меня есть промежуточное ПО в файле index.js моего приложения

index.js 

import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
import { Provider } from "react-redux";
import React, { Components } from "react";
import { createStore, applyMiddleware } from "redux";
import appReducer from "./src/data/redux/reducers/appReducer";
import thunk from "redux-thunk";

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

const store = createStoreWithMiddleware(appReducer);
console.log("Store", store.getState());
const AppContainer = () => (
  <Provider store = {store}>
    <App />
  </Provider>
);

AppRegistry.registerComponent(appName, () => AppContainer);

Я узнал об этой реализации из учебника Youtube.

Редактировать 2: добавление в fetchData вызов

Я вызываю fetchData в функции _onPress, как это 

_onPress = () => {
    const {fetchData} = this.props;
    let url = "https://randomuser.me/api/?results=10";
    fetchData(url);
    console.log("should have fetched");
  };

вот как мое приложение было подключено к redux

const mapStateToProps = state => {
  return { response: state };
};

const mapStateToDispatch = dispatch => ({
  fetchData: url => dispatch(fetchData(url)),
});

export default connect(
  mapStateToProps,
  mapStateToDispatch
)(SearchScreen);

это действие в моем приложении 

export const fetchingRequest = () => {
  {
    type: FETCHING_REQUEST;
  }
};

export const fetchingSuccess = json => {
  {
    type: FETCHING_SUCCESS;
    payload: json;
  }
};

export const fetchingFailure = error => {
  {
    type: FETCHING_FAILURE;
    payload: error;
  }
};

1 Ответ

0 голосов
/ 02 июля 2019

Мне удалось выяснить проблему благодаря проработке шагов в комментариях благодаря Майклу Ченгу.Я обнаружил, что проблема в том, что у меня были действия с простыми объектами, но они ничего не возвращали.

Первоначальные действия были 

export const fetchingRequest = () => {
  {
    type: FETCHING_REQUEST;
  }
};

export const fetchingSuccess = json => {
  {
    type: FETCHING_SUCCESS;
    payload: json;
  }
};

export const fetchingFailure = error => {
  {
    type: FETCHING_FAILURE;
    payload: error;
  }
};

для этого 

export const fetchingRequest = () => {
  return {
    type: FETCHING_REQUEST
  }
};

export const fetchingSuccess = json => {
  return {
    type: FETCHING_SUCCESS,
    payload: json
  }
};

export const fetchingFailure = error => {
  return {
    type: FETCHING_FAILURE,
    payload: error
  };
};

с включением return для каждого действия

...