reactjs - 我在第一个Redux计数器中不了解问题

Question

我的代码有错误
编译失败
./src/components/counterTemp.js
尝试导入错误:未从“../action/indexAction”导出“减量”。
有我的代码>> https://github.com/ennouri0maak/my-error
ther is the exact error

Answer 1

好吧，您必须要小心，因为给它起类似的名字可能会让您感到困惑。
您要导入CounterTemp.js文件的是您使用每个 Action 定义的名称，而不是您的ActionCreator的实际名称，它们实际上是crementAction，decrementAction和resetAction。因此，导入将是:

import {
  incrementAction,
  decrementAction,
  resetAction,
} from "../action/indexAction";

另外，在mapDispatchToProps方法中，您不再可以像以前那样直接将增量分配给增量，而是必须分配特定的ActionCretor(在这种情况下为增量 Action )来增量，否则您将得到一个错误，因为它将告诉您该增量，减量和重置是不确定的，因此它将保持:

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      increment: incrementAction,
      decrement: decrementAction,
      reset: resetAction,
    },
    dispatch
  );
}

要查看 CounterTemp.js代码是什么样的，它将是:

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";

import {
  incrementAction,
  decrementAction,
  resetAction,
} from "../action/indexAction";

class Counter extends Component {
  render() {
    const { count, increment, decrement, reset } = this.props;
    return (
      <div>
        <h2>Counter</h2>
        <button onClick={decrement}>-</button>
        <span> {count} </span>
        <button onClick={increment}>+</button>
        <br />
        <br />
        <button onClick={reset}>Reset</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    count: state.count,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      increment: incrementAction,
      decrement: decrementAction,
      reset: resetAction,
    },
    dispatch
  );
}

Counter = connect(mapStateToProps, mapDispatchToProps)(Counter);

export default Counter;

PS:桶文件(索引文件)(如果您已经将它们嵌套在特定的文件夹中)，只需添加名称“index.js”，因为托管类型的文件夹(而不是索引)指定了哪种类型。因此，它将由indexAction更改为index.js，因此您可以通过 "../action"而不是 "../action/indexAction"导入ActionCreators。