javascript - React-Reudx : Actions must be plain objects. 使用自定义中间件进行异步操作

Question

我用react-redux做了一个反例，但似乎有错误。

错误消息是'操作必须是普通对象。使用自定义中间件进行异步操作。'

并且错误行是

const mapDispatchToProps = dispatch => {
  15 |   return {
> 16 |     handleIncrease: () => dispatch(actions.increase()),
  17 |     handleDecrease: () => dispatch(actions.decrease())
  18 |   };
  19 | };

---------------=--------------

首先，actions/actionTypes.js

export const INCREASE = "INCREASE";
export const DECREASE = "DECREASE";

actions/index.js

import * as types from "./actionTypes";

export const increase = number => {
  type: types.INCREASE, number;
};

export const decrease = number => {
  type: types.DECREASE, number;
};

reducers/index.js

import { combineReducers } from "redux";
import number from "./number";

const reducers = combineReducers({
  number
});

export default reducers;

reducers/number.js

import * as types from "../actions/actionTypes";

const number = (state = 0, action) => {
  switch (action.type) {
    case types.INCREASE:
      return { ...state, number: action.number + 1 };
    case types.DECREASE:
      return { ...state, number: action.number - 1 };
    default:
      return state;
  }
};

export default number;

组件/Counter.js

import React, { Component } from "react";

export default class Counter extends Component {
  render() {
    const { number, onIncrease, onDecrease } = this.props;
    return (
      <div>
        <h1>Counter</h1>
        <div>Value: {number}</div>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
      </div>
    );
  }
}

最后，App.js

import React, { Component } from "react";
import "./App.css";
import Counter from "./components/Counter";

import { connect } from "react-redux";
import * as actions from "./actions";

const mapStateToProps = state => {
  return {
    number: state.number
  };
};

const mapDispatchToProps = dispatch => {
  return {
    handleIncrease: () => dispatch(actions.increase()),
    handleDecrease: () => dispatch(actions.decrease())
  };
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <Counter
          number={this.props.number}
          onIncrease={this.props.handleIncrease}
          onDecrease={this.props.handleDecrease}
        />
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

哪一部分是错误的？ 我也很好奇。

谢谢。

• 我修复了这个错误，但接下来出现了新的错误

错误消息是

Uncaught Error: Objects are not valid as a React child (found: object with keys {number}). If you meant to render a collection of children, use an array instead.
in div (at Counter.js:9)
in div (at Counter.js:7)
in Counter (at App.js:25)
in div (at App.js:24)
in App (created by Connect(App))
in Connect(App) (at index.js:16)
in Provider (at index.js:15)
at invariant (invariant.js:42)
at throwOnInvalidObjectType (react-dom.development.js:7362)
at updateSlot (react-dom.development.js:7631)
at reconcileChildrenArray (react-dom.development.js:7762)
at reconcileChildFibers (react-dom.development.js:8121)
at reconcileChildrenAtExpirationTime (react-dom.development.js:8248)
at reconcileChildren (react-dom.development.js:8231)
at updateHostComponent (react-dom.development.js:8539)
at beginWork (react-dom.development.js:8986)
at performUnitOfWork (react-dom.development.js:11814)
at workLoop (react-dom.development.js:11843)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:11318)
at renderRoot (react-dom.development.js:11885)
at performWorkOnRoot (react-dom.development.js:12449)
at performWork (react-dom.development.js:12370)
at performSyncWork (react-dom.development.js:12347)
at interactiveUpdates (react-dom.development.js:12597)
at interactiveUpdates (react-dom.development.js:1958)
at dispatchInteractiveEvent (react-dom.development.js:4259)

Answer 1

您不会在此处返回任何内容:

export const increase = number => {
  type: types.INCREASE, number;
};

export const decrease = number => {
  type: types.DECREASE, number;
};

通过实际返回一个对象来修复它:

export const increase = number => {
  return {
    type: types.INCREASE, number
  }
};

export const decrease = number => {
  return {
    type: types.DECREASE, number
  }
};

或更简洁:

export const increase = number => ({
  type: types.INCREASE, number;
});

export const decrease = number => ({
  type: types.DECREASE, number;
});

编辑:

您还需要修复 reducer :

const number = (state = 0, action) => {
  switch (action.type) {
    case types.INCREASE:
      return state + 1;
    case types.DECREASE:
      return state - 1;
    default:
      return state;
  }
};

状态是唯一的数字，因此您不需要复制任何值。您从您的 reducer 返回一个对象，这就是 react 无法渲染它的原因。