useReduce

Question 1

reduce = (state, action) => {}

Answer 1

Это функция, которая преобразовывает state
state - true / false
action - инструкция, как преобразовать state (будет объект с типом {collapsed : false})
Является альтернативой из useState
Концентрируются изменения.
Описываем тип action:
type actionType = {
type: string
}
const TOGGLE_CONSTANT = ‘TOGGLE - COLLAPSED’
Прописываем инструкцию:
const reducer = (state: boolean, action: actionType) => {
switch (action.type){
case TOGGLE_CONSTANT: return !state
throw new Error(‘Bad action type’)
}
ИЛИ
if (action.type === TOGGLE_CONSTANT){
return !state (должен быть возвращен тот же объект)
}
return state (должен быть возвращен тот же объект)
}
Используем useReducer
let [collapsed, dispatch] = useReducer(reducer, false);
dispatch - отправить
<AccordionTitle title={props.titleValue} onClick = {() => dispatch({type: TOGGLE_CONSTANT})} onChange={() => {}}/>
Должен быть прописан тип, как в инструкции, если мы хотим его использовать

Если очень много useState, то луччше всего использовать useReduce

type ActionType = {
type: string
}

export const TOGGLE_CONSTANT = ‘TOGGLE - COLLAPSED’

export type StateType = {
collapsed: boolean
}

export const reducer = (state: StateType, action: ActionType): StateType (обязательно указываем тип) => {
switch (action.type){
case TOGGLE_CONSTANT:
return {…state, collapsed: !state.collapsed}
default:
throw new Error(‘Bad action type’)
}
}

let [state, dispatch] = useReducer(reducer, {collapsed : false});
<AccordionTitle title={props.titleValue} onClick = {() => dispatch({type: TOGGLE_CONSTANT})} onChange={() => {}}/>
{!state.collapsed && <AccordionBody></AccordionBody>}
Перерисовка не будет срабатывать, если нарушены правила чистой функции, хоть и объект может срабатывать, поэтому необходимо выполнить копию объекта.