Redux-Thunk: Действия должны быть простыми объектами. Использовать пользовательское промежуточное ПО для асинхронных действий - PullRequest
Новая
       6

Redux-Thunk: Действия должны быть простыми объектами. Использовать пользовательское промежуточное ПО для асинхронных действий

0 голосов
/ 01 мая 2018

Невозможно решить эту проблему, используя ответную нить и избыточный поток.

Я пытаюсь опубликовать данные в firebase.io и неоднократно получаю ту же ошибку: действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий.

редукторы / index.js 

import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'
import PlacesReducer from './placesReducer'


const rootReducer = combineReducers({
  places : PlacesReducer,
    });

let composeEnhancers = compose;

if (__DEV__) {
    composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}

const configureStore = () => {
    return createStore(rootReducer, applyMiddleware(thunk));
};

export default configureStore;

действия / index.js 

export const addPlace = (placeName, location, image) => {
    return dispatch => {
        const placeData = {
            name: placeName,
            location: location
        };
        fetch("https://awesome-places-b592c.firebaseio.com/placesReducer.json", {
            method: "POST",
            body: JSON.stringify(placeData)
        })
        .catch(err => console.log(err))
        .then(res => res.json())
        .then(parsedRes => {
            console.log(parsedRes);
        });
    };
};

редукторы / placesReducer.js 

const initialState = {
  places: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_PLACE":
      return {
        ...state,
        places: state.places.concat({
          key: Math.random(),
          name: action.placeName,
          image: {
            uri: action.image.uri,
            location: action.location
          }
        })
      };
    default:
      return state;
  }
};

export default reducer;

Вся помощь приветствуется, спасибо.

ОБНОВЛЕНИЕ

Добавлен аргумент initialState для функции createStore() в redurs / index.js 

const configureStore = () => {
  return createStore(rootReducer, {places: []}, applyMiddleware(thunk));
};

Все еще получаю ту же ошибку

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Попробуйте обновить код следующим образом: 

export const addPlace = (placeName, location, image) => {
    //return dispatch => {
        const placeData = {
            name: placeName,
            location: location
        };
        fetch("https://awesome-places-b592c.firebaseio.com/placesReducer.json", {
            method: "POST",
            body: JSON.stringify(placeData)
        })
        .catch(err => console.log(err))
        .then(res => res.json())
        .then(parsedRes => {
            console.log(parsedRes);
            // you may tweak this
            // use ...parsedRes following the reducer code you paste,
            // I assume location, placeName and image are inside parsedRes
            dispatch({ type:"ADD_PLACE", ...parsedRes })
        });
    //};
};

Тогда в редукторе: 

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_PLACE":
      // check the action content
      console.log(action)
      return {
        ...state,
        places: state.places.concat({
          key: Math.random(),
          name: action.placeName,
          image: {
            uri: action.image.uri,
            location: action.location
          }
        })
      };
    default:
      return state;
  }
};
0 голосов
/ 01 мая 2018

Вам нужно dispatch действия после завершения асинхронного запроса 

.then(parsedRes => {
     console.log(parsedRes);
     dispatch({
       type: YOUR_REDUCER_TYPE,
       parsedRes
    })
});

Также, как указано в createStore документах , необходимо добавить initialState

(reducer, preloadedState, enhancer)
...