Javascript React Reudx:操作必须是普通对象。使用自定义中间件进行异步操作

我用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";

import * as types from "./actionTypes";

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

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

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

const reducers = combineReducers({
  number
});

export default reducers;

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;

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>
    );
  }
}

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);

操作/index.js

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

import * as types from "./actionTypes";

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

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

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

const reducers = combineReducers({
  number
});

export default reducers;

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;

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>
    );
  }
}

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);

减速机/index.js

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

import * as types from "./actionTypes";

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

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

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

const reducers = combineReducers({
  number
});

export default reducers;

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;

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>
    );
  }
}

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);

减速机/number.js

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

import * as types from "./actionTypes";

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

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

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

const reducers = combineReducers({
  number
});

export default reducers;

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;

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>
    );
  }
}

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);

组件/Counter.js

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

import * as types from "./actionTypes";

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

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

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

const reducers = combineReducers({
  number
});

export default reducers;

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;

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>
    );
  }
}

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);

---

您在此处不返回任何内容：

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;
});

编辑：

您还需要修复减速器：

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

---

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

此处不返回任何内容：

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;
});

编辑：

您还需要修复减速器：

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无法渲染它的原因。

我从未见过您使用bindActionCreators。 范例

const{createStore，bindActionCreators}=Redux；
常数{Component}=React；
const{connect，Provider}=ReactRedux；
常量测试点击器=（道具）=>{
返回(
点击我
)
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
返回(
你好
{this.props.work}

);
}
}
函数MapStateTops（状态）{
返回{
工作：国家工作
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators({
测试操作：更改AC1，
测试2：更改AC2，
测试3：更改AC3
}，派遣）；
}
App=连接（mapStateToProps、mapDispatchToProps）（App）；
常量更改AC1=（操作）=>{
log（“我被点击了”）；
返回{
类型：“GO”
}
}
常量更改AC2=（操作）=>{
log（“我被点击了”）；
返回{
类型：“是”
}
}
常量更改AC3=（操作）=>{
log（“我被点击了”）；
返回{
类型：“发光”
}
}
const initialState={working:“no”}；
const reducer=（状态、操作）=>{
开关（动作类型）{
案例“GO”：
返回Object.assign（{}，state，{working:“yes”}）；
案例“是”：
返回Object.assign（{}，state，{working:“地狱是！！！”}）；
案例“辉光”：
返回Object.assign（{}，state，{working:“这是shiiiizzz”}）；
违约：
返回状态；
}
}
const store=createStore（reducer，initialState）；
ReactDOM.render(
您可能正在修改状态（尝试将number存储在变量中，返回整个state…state，然后number属性修改示例{…state，number:（变量）}），或者您需要检查如何绑定操作。
我从未见过您使用bindActionCreators。
范例

const{createStore，bindActionCreators}=Redux；
常数{Component}=React；
const{connect，Provider}=ReactRedux；
常量测试点击器=（道具）=>{
返回(
点击我
)
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
返回(
你好
{this.props.work}

);
}
}
函数MapStateTops（状态）{
返回{
工作：国家工作
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators({
测试操作：更改AC1，
测试2：更改AC2，
测试3：更改AC3
}，派遣）；
}
App=连接（mapStateToProps、mapDispatchToProps）（App）；
常量更改AC1=（操作）=>{
log（“我被点击了”）；
返回{
类型：“GO”
}
}
常量更改AC2=（操作）=>{
log（“我被点击了”）；
返回{
类型：“是”
}
}
常量更改AC3=（操作）=>{
log（“我被点击了”）；
返回{
类型：“发光”
}
}
const initialState={working:“no”}；
const reducer=（状态、操作）=>{
开关（动作类型）{
案例“GO”：
返回Object.assign（{}，state，{working:“yes”}）；
案例“是”：
返回Object.assign（{}，state，{working:“地狱是！！！”}）；
案例“辉光”：
返回Object.assign（{}，state，{working:“这是shiiiizzz”}）；
违约：
返回状态；
}
}
const store=createStore（reducer，initialState）；
ReactDOM.render(
您可能正在改变状态（尝试将数字存储在变量中，返回整个状态…状态，然后数字属性改变该示例{…状态，数字：（变量）}），或者您需要检查如何绑定您的操作。
谢谢您，先生。但接下来，我出现了新错误。它是“未捕获错误：对象作为子对象无效”（找到：具有键{number}的对象）。如果要呈现子对象集合，请改用数组。“。@arming.Zamorano完整消息是什么？未捕获错误：对象作为React子对象无效（找到：具有键{number}的对象）。如果要呈现子对象集合，请改用数组。在div中（在Counter.js:9处）in div（在Counter.js:7）in Counter（在App.js:25）in div（在App.js:24）in App（由Connect（App）创建）in Connect（App）（在index.js:16）in Provider（在index.js:15）in invariant（invariant.js:42）in throwOnInvalidObjectType（react dom.development.js:7362）谢谢，先生。但是接下来，我出现了新的错误。它是“未捕获错误：对象作为React子对象无效（找到：具有键{number}的对象）。如果您要呈现子对象集合，请使用数组。”。@arming.Zamorano完整消息是什么？未捕获错误：对象作为React子对象无效（找到：具有键{number}的对象）。如果要呈现子对象集合，请改用数组。在div中（在Counter.js:9处）在div中（在Counter.js:7处）在Counter中（在App.js:25处）在div中（在App.js:24处）在App中（由Connect（App）创建）