Конспект https://www.geeksforgeeks.org/reactjs/react-redux-hooks-useselector-and-usedispatch/
Усовершентсвованный способ работы с Redux через useState.
Перехватчик useState - это функция, которая позволяет добавлять состояние к функциональному компоненту. Это АЛЬТЕРНАТИВА перехватчику useReducer, который является предпочтительным, когда нам требуется базовое обновление. С useReducer было так:
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from '../actions/actions'; // import ACTION "increment" ( {type: 'INCREMENT'} )
const Example = () => {
const counter = useSelector(state => state.counter); // USE_SELECTOR!!! будет изменяться при обновлении
const dispatch = useDispatch(); // определение dispatch для отправки action
....
const handleIncrement = () => {
dispatch(increment()); // DISPATCH ACTION!!!! increment - функция создания action типа
// export const toggleTask = id => ({
// type: actions.TASK_TOGGLE,
// payload: { id: id } // или так: payload: { id }
});
....
};
С useState так:
const [counter, setCounter] = useState('');
const dispatch = useDispatch();
....
const handleTaskTitleChange = (e) => {
setCounter(e.target.value);
}
....
Перехватчики useState используются для добавления переменных состояния в компоненты. Синтаксис:
const [state, setState] = useState(initialState);
Короткий пример:
const [count, setCount] = useState(0); // useState!!!
Полный пример:
import React, { useState } from "react";
function App() {
const [count, setCount] = useState(0); // useState!!!
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return (
<div>
<h1>Count: {count}</h1> {/* Display the current count */}
<button onClick={increment}>Increment</button> {/* Increment the count */}
<button onClick={decrement}>Decrement</button> {/* Decrement the count */}
</div>
);
}
export default App;
- useSelector - доступ к store
- useDispatch - позволяет функциональным компонентам отправлять действия в хранилище Redux