Почему я получаю сообщение об ошибке «Действия должны быть обычными объектами»? - PullRequest
Новая
       6

Почему я получаю сообщение об ошибке «Действия должны быть обычными объектами»?

0 голосов
/ 22 сентября 2018

Я только учусь реагировать на редуксы и пытаюсь запустить thunk, вот что было: 

const getRepos = dispatch => {
  try {
    const url = `https://api.github.com/users/reduxjs/repos?sort=updated`;
    fetch(url)
      .then(response => response.json())
      .then(json => {
        console.log("thunk: getrepos data=", json);
      });
  } catch (error) {
    console.error(error);
  }
};

Я подключил свой компонент к магазину: 

const bla = dispatch =>
  bindActionCreators(
    {
      geklikt,
      getRepos
    },
    dispatch
  );

const Container = connect(
  null,
  bla
)(Dumb);

КогдаЯ запускаю getRepos thunk, который я получаю:

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

В чем может быть проблема?Я включил промежуточное программное обеспечение? ссылка на код песочницы

Ответы [ 2 ]

0 голосов
/ 22 сентября 2018

Пожалуйста, проведите рефакторинг структуры вашего приложения, все это в одном файле и очень трудно для чтения.

Примите во внимание:

  • Использование оператора switch в ваших редукторах
  • Отделение компонентов от контейнеров: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
  • Убедитесь, что установленоначальное состояние редуктора: state={}, state=[] ... и т. д.
  • Упростите действие, чтобы использовать .then().catch() или async/await в блоке try/catch.

А пока вот рабочая версия: https://codesandbox.io/s/oxwm5m1po5

actions / index.js 

import { GEKLIKT } from "../types";

export const getRepos = () => dispatch =>
  fetch(`https://api.github.com/users/reduxjs/repos?sort=updated`)
    .then(res => res.json())
    .then(data => dispatch({ type: GEKLIKT, payload: data }))
    .catch(err => console.error(err.toString()));

/*
  export const getRepos = () => async dispatch => {
    try {
      const res = await fetch(`https://api.github.com/users/reduxjs/repos?sort=updated`)
      const data = await res.json();
      dispatch({ type: GEKLIKT, payload: data }))
    } catch (err) { console.error(err.toString())}
  }
*/

компоненты / App.js 

import React from "react";
import Dumb from "../containers/Dumb";

export default () => (
  <div className="App">
    <Dumb />
  </div>
);

контейнеры / Dumb.js 

import React from "react";
import { connect } from "react-redux";
import { getRepos } from "../actions";

let Dumb = ({ data, getRepos }) => (
  <div>
    hi there from Dumb
    <button onClick={getRepos}>hier</button>
    <pre>
      <code>{JSON.stringify(data, null, 4)}
);экспортировать соединение по умолчанию (state => ({data: state.data}), {getRepos}) (тупой);

redurs / index.js 

import { combineReducers } from "redux";
import { GEKLIKT } from "../types";

const klikReducer = (state = {}, { payload, type }) => {
  switch (type) {
    case GEKLIKT:
      return { ...state, data: payload };
    default:
      return state;
  }
};

export default combineReducers({
  data: klikReducer
});

root / index.js 

import React from "react";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import rootReducer from "../reducers";
import App from "../components/App";

const store = createStore(rootReducer, applyMiddleware(thunk));

export default () => (
  <Provider store={store}>
    <App />
  </Provider>
);

types / index.js 

export const GEKLIKT = "GEKILKT";

index.js 

import React from "react";
import { render } from "react-dom";
import App from "./root";
import "./index.css";

render(<App />, document.getElementById("root"));
0 голосов
/ 22 сентября 2018

Вы вернули обещание в действии.Обещание не является простым объектом, и поэтому возвращаемое действие не будет простым объектом и, следовательно, ошибкой.

Поскольку вы используете промежуточное ПО thunk, ваши действия могут быть функциями, и вот как вы это сделаете. 

  const GET_REPOS_REQUEST = "GET_REPOS_REQUEST";
  const GET_REPOS_SUCCESS = "GET_REPOS_SUCCESS";
  const GET_REPOS_ERROR = "GET_REPOS_ERROR";
  export function getRepos() {
      return function action(dispatch) {
        dispatch({type: GET_REPOS})
       const url = `https://api.github.com/users/reduxjs/repos?sort=updated`;
       const request = fetch(url);
       return request.then(response => response.json())
        .then(json => {
            console.log("thunk: getrepos data=", json);
            dispatch({type: GET_REPOS_SUCCESS, json});
        })
       .then(err => {
            dispatch({type: GET_REPOS_ERROR, err});
            console.log(“error”, err);
       });
  };
  }

Путь функции стрелки: 

export getRepos = () =>{
  return action = dispatch => {
    dispatch({type: GET_REPOS})
   const url = `https://api.github.com/users/reduxjs/repos?sort=updated`;
   const request = fetch(url);
   return request.then(response => response.json())
    .then(json => {
        console.log("thunk: getrepos data=", json);
        dispatch({type: GET_REPOS_SUCCESS, json});
    })
   .then(err => {
        console.log(“error”, err);
        dispatch({type: GET_REPOS_ERROR, err});
   });
};}
...