Хук useReducer React.js

использоватьReducer React.js

useReducer — это крючок для управления состояниями:

const [состояние, отправка] = useReducer (редуктор, инициализацияState);

окей, давай разберем этот крючок

1- initalizeState: объект, содержащий все состояния, которыми мы хотим управлять с помощью хука Редюсера.

const initalizeState = {
age: "",
name: "",
isClicked: false,
counter: 1,
}

2-state: это объект, который содержит все состояния в initalizeState, и мы можем разрушить такие состояния.

const [ { name, age, isClicked, counter }, dispatch] = useReducer(reducer, initializeState);

3- диспетчеризация: это функция, которая передает команду функции редуктора для управления/обновления определенного состояния. Давайте представим, что у нас есть кнопка, и мы хотим обновить состояние isClicked, когда мы нажимаем на кнопку и мы хотим обновить счетчик, добавляя 5 при каждом клике

<button onClick={ () ⇒ { dispatch( { type: “clicked”, payload:5 } ) } }>click here</button>

4-reducer: это функция, в которой мы управляем состояниями.

function reducer( state, action ){
switch ( action.type) {
case “clicked”:
	return { …state, isClicked: true, counter: state.counter + action.payload }
default:
	throw new Error (”Unknown Action”)
}
}

-сообщает значения после нажатия на кнопку

name = ""
age = ""
isClicked = true
counter = 6

здесь, поскольку мы хотим просто обновить состояние isClicked, мы возвращаем другую статистику без изменений

…состояние