Использовал в проекте connect, но сейчас хочу перейти на хуки
Не могу понять в чем проблема когда при вводе в input диспатчится action:
onChange={(e) => dispatch(actions.setInputText(e.target.value))}
но при выводе в лист todo пустая строка, хотя при использовании connect все работало хорошо?
const inputText = useSelector(state => state.inputText.data);
↑Это строка со значением inputa↑
Сам проект - scintillating-plantation.surge.sh
Сам код:
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>
);
}
Сам проект - scintillating-plantation.surge.sh