const initialState = {count: 0};
function reducer(state, action) {
//console.log('reducer');
switch (action.type) {
case 'increment':
//console.log('increment');
return {count: state.count + action.num};
case 'decrement':
//console.log("decrement");
return {count: state.count - action.num};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement',num:1})}>-</button>
<button onClick={() => dispatch({type: 'increment',num:1})}>+</button>
</>
);
}
export default Counter;
Суть вопроса вот в чем если к счетчику прибавлять или уменьшать значение то //console.log('reducer'); вызывается 2 раза ну и //console.log('increment') и //console.log("decrement"); тоже в данном примере счетчик работает нормально если там будет меняться булевое значение то работает неправильно
при первом клике вызывается по //console.log('reducer'); 1 раз потом по 2
Например в таком примере у меня есть 1 todo item просто с текстом и чекбоксом и я должен поменять ее значение на противоположное но из-за того что в reducer вызывается 2 раза оно не меняться
export default function(state, action) {
switch (action.type) {
case 'add':
return [
...state,
{
id: Date.now(),
title: action.payload,
completed: false
}
]
case 'toggle':
return state.map(todo => {
if (todo.id === action.payload) {
todo.completed = !todo.completed
}
return todo
})
case 'remove':
return state.filter(todo => todo.id !== action.payload)
default:
return state
}
}
не работает в action.type === 'toggle' значение меняться по 2 раза
