我不明白我的第一个 redux 计数器的问题

Question

我的代码有错误

编译失败 ./src/components/counterTemp.js 尝试导入错误：'decrement' 未从“../action/indexAction”导出。

有我的代码>> https://github.com/ennouri0maak/my-error

ther is the exact error

Answer 1

您尝试从未定义的文件中导入以下内容。如果你确实想导入下面的内容，请从 indexTypes 文件中导入它们，尽管我相信你想要导入实际的动作。

import { increment, decrement, reset } from "../action/indexAction";

尽管您将自己的操作定义为incrementAction, decrementAction, resetAction

所以你需要做：

import {
 incrementAction,
 decrementAction,
 resetAction`
} from '../action/indexActions'

Answer 2

indexAction.js 没有任何名称为 decrement、increment 或 reset 的导入。

因此，您要么需要重构 indexAction.js 中的名称，要么需要像下面这样在 counterTemp.js 中导入

import {
    incrementAction as increment,
    decrementAction as decrement,
    resetAction as reset
} from "../action/indexAction";

而不是

import { increment, decrement, reset } from "../action/indexAction";

Answer 3

嗯，你要小心，因为给它相似的名字你可能会混淆。

您导入到 CounterTemp.js 文件中的是您定义每个动作所使用的名称，而不是您的 ActionCreator 的实际名称，它们实际上是 incrementAction、decrementAction 和 resetAction。因此导入将是：

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

此外，在您的 mapDispatchToProps 方法中，您不能再像以前那样直接将 increment 分配给 increment，但您必须分配特定的 ActionCretor，在本例中为 incrementAction，以增加，否则您将收到错误消息告诉你递增、递减和重置是未定义的，所以它会保持：

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

我不明白我的第一个 redux 计数器的问题

i don't inderstand the problem in my first redux counter

counter

compiler-errors

reactjs

redux