为什么我会收到 'Actions must be plain objects' 错误？

Question

我正在学习 react-redux 并尝试发出一个 thunk，这就是 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 时，我得到：

Actions must be plain objects. Use custom middleware for async actions.

可能是什么问题？我包括中间件？ link 进行编码沙盒

Answer 1

你兑现了承诺。 promise 不是普通对象，因此返回的操作不会是普通对象，因此会出现错误。

由于您使用的是 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});
   });
};}

Answer 2

请重构您的应用程序结构，它都在一个文件中，而且非常难以阅读。

需要考虑的事项：

在你的 reducers 中使用 switch 语句
从容器中分离组件：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
确保设置初始减速器状态：state={}、state=[] ...等
简化操作以在 try/catch 块中使用 .then().catch() 或使用 async/await。

同时，这里有一个工作版本：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())}
  }
*/

components/App.js

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

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

containers/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)}</code>
    </pre>
  </div>
);

export default connect(
  state => ({ data: state.data }),
  { getRepos }
)(Dumb);

reducers/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"));

为什么我会收到 'Actions must be plain objects' 错误？

Why do I get a 'Actions must be plain objects' error?

reactjs

redux-thunk

react-redux