Конспект https://www.geeksforgeeks.org/reactjs/react-redux-hooks-useselector-and-usedispatch/
С useDispatch и useSelector.
- useSelector - обеспечивает доступ к state
- useDispatch - позволяет функциональным компонентам отправлять действия в хранилище Redux
Использование:
const counter = useSelector(state => state.counter);
Пример с useDispatch, useSelector:
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!!! count будет изменяться при обновлении
const dispatch = useDispatch(); // USE_DISPATCH!!! определение dispatch для отправки action
....
const handleIncrement = () => {
dispatch(increment()); // DISPATCH ACTION!!!! Отправка action в reducer.
// increment() возвращает объект, который называется ACTION.
// export const increment = () => ({ type: actions.INCREMENT });
// В ACTION указывается тип действия и, при необходимости, дополнительные данные (payload):
// Пример action с параметром (https://github.com/cherepakhin/redux_first_app/blob/master/src/store/actions_task.js):
// export const toggleTask = id => ({
// type: actions.TASK_TOGGLE,
// payload: { id: id } // или так: payload: { id }
// });
});
....
};
Усовершентсвованный способ работы с Redux через useState.
Перехватчик useState - это функция, которая позволяет добавлять состояние к функциональному компоненту. Это АЛЬТЕРНАТИВА перехватчику useSelector. С useState так:
const [counter, setCounter] = useState(0); // USE_STATE!!! 0 - это начальное значение переменной состояния counter.
const dispatch = useDispatch();
....
const handleTaskTitleChange = (e) => {
setCounter(e.target.value);
}
....
Полный пример:
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;