移动的组件不工作（react-redux）

Question

when I move my component to a separate file it won't work.

I use redux and react
code sand box link: https://codesandbox.io/s/adoring-water-l35zj?fontsize=14&hidenavigation=1&theme=dark

this code will work:

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

but this won't work:(index.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);

I don't understand why this won't work.

I am a beginner to react and redux. I am really happy to help me guys please answer

Answer 1

I have created an example from your code and moved the App component in a separate file as well. Here is a link for the working code.

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