перемещенный компонент не выполняет свою работу (реаги-редукс)

Question

когда я перемещаю свой компонент в отдельный файл, он не будет работать.

Я использую приставку и реагирую
Код песочницы ссылка: https://codesandbox.io/s/adoring-water-l35zj?fontsize=14&hidenavigation=1&theme=dark

этот код будет работать:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import configStore from "./store/store";
import { addTodo } from "./store/store";

const App = () => {
  const [note, setNote] = useState("");
  const [error, setError] = useState(false);

  return (
    <div>
      <div>
        <input
          type={"text"}
          value={note}
          onChange={e => {
            setNote(e.target.value);
          }}
        />
        <button
          onClick={() => {
            if (note !== "") {
              store.dispatch(addTodo(note));
              setNote("");
              setError(false);
            } else {
              setError(true);
            }
          }}
        >
          SAVE
        </button>
        {error && <div>PLEASE ENTER A VALUE FOR TODO</div>}
        {store.getState().map(todo => {
          return <div key={todo.id}>{todo.note}</div>;
        })}
      </div>
    </div>
  );
};

const store = configStore();
console.log(store.getState());
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

но это не будет работать: (индекс. js)

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import configStore from "./store/store";
import AddTodo from "./components/AddTodo";

const App = () => {
  return (
    <div>
      <AddTodo />
      {store.getState().map(todo => {
        return <div key={todo.id}>{todo.note}</div>;
      })}
    </div>
  );
};

const store = configStore();

console.log(store.getState());

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

(AddTodo. js):

import React, { useState } from "react";
import { connect } from "react-redux";
import { addTodo } from "../store/store";

const AddTodo = props => {
  const [note, setNote] = useState("");
  const [error, setError] = useState(false);

  return (
    <div>
      <input
        type={"text"}
        value={note}
        onChange={e => {
          setNote(e.target.value);
        }}
      />
      <button
        onClick={() => {
          if (note !== "") {
            props.addTodos(note);
            setNote("");
            setError(false);
          } else {
            setError(true);
          }
        }}
      >
        SAVE
      </button>
      {error && <div>PLEASE ENTER A VALUE FOR TODO</div>}
    </div>
  );
};

const mapDispatchToProps = dispatch => ({
  addTodos: note => dispatch(addTodo(note))
});

export default connect(
  undefined,
  mapDispatchToProps
)(AddTodo);

Я не понимаю, почему это не сработает.

Я новичок в реакции и редукции. Я очень рад помочь мне, ребята, пожалуйста, ответьте

Answer 1

Я создал пример из вашего кода и также переместил компонент приложения в отдельный файл. Вот ссылка на рабочий код.

https://codesandbox.io/s/compassionate-golick-dbhww