K
K
kirillleogky2020-07-04 17:14:23
JavaScript
kirillleogky, 2020-07-04 17:14:23

Why does useDispatch dispatch but the state doesn't change?

I used connect in the project, but now I want to switch to hooks.
I can’t understand what the problem is when the action is dispatched when entering the input:

onChange={(e) => dispatch(actions.setInputText(e.target.value))}

but when outputting to todo sheet an empty string even though when using connect everything worked fine?

const inputText = useSelector(state => state.inputText.data);

↑This is a string with value inputa↑

The project itself is scintillating-plantation.surge.sh

The code itself is:
import React from "react";
import actions from "../../../actions";
import { useSelector, useDispatch } from 'react-redux'

export default function AddTodoInputBtn(props) {
  const inputText = useSelector(state => state.inputText.data);
  const inputActiveClass = useSelector(state => state.inputActiveClass.data);
  const dispatch = useDispatch();

  const inputNode = React.createRef();
  function changeInputLogo() {
    if (inputActiveClass === "") {
      dispatch(actions.setInputActiveClass("_active"));
      inputNode.current.focus();
      return;
    }
    dispatch(actions.setInputActiveClass(""));
    dispatch(actions.setInputText(""));
  }

  return (
    <form
      onSubmit={(e) => {
        window.console.log(inputText);    <----------------вот тут я вывожу в консоль const inputText = useSelector(state => state.inputText.data);
        dispatch(actions.setInputActiveClass(""));
        inputNode.current.blur();
        props.onAddTodo(e);
      }}
      className={`todo_block-add_todo add_todo_block add_todo_block${inputActiveClass}`}
    >
      <div
        className={`add_todo_block-icon${inputActiveClass}`}
        onClick={changeInputLogo}
      />
      <input
        ref={inputNode}
        autoComplete="off"
        type="text"
        placeholder="Add List"
        className="add_todo_block-input"
        id="input"
        value={inputText}
        onChange={(e) => dispatch(actions.setInputText(e.target.value))}
        onClick={changeInputLogo}
      ></input>
      <button
        type="submit"
        className={`add_todo_block-btn add_todo_block-btn${inputActiveClass}`}
      >
        <div>Add</div>
      </button>
    </form>
  );
}


The project itself is scintillating-plantation.surge.sh

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question