What can happen when changing state directly inside a Redux reducer?
I am looking at this Redux tutorial where the following reducer is discussed:
function visibilityFilter(state = 'SHOW_ALL', action) {
return action.type === 'SET_VISIBILITY_FILTER' ?
action.filter :
state
}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{
text: action.text, completed: false
}]);
case 'TOGGLE_TODO':
return state.map((todo, index) =>
action.index === index ?
{ text: todo.text, completed: !todo.completed } :
todo
)
default: return state;
}
}
function todoApp(state = {}, action) {
return {
todos: todos(state.todos, action),
visibilityFilter: visibilityFilter(state.visibilityFilter, action)
};
}
What does it do, but I don't understand why it state.concat
/ state.map
duplicates the state rather than working on it directly. I understand this to achieve immutability, but, technically, what might go wrong if I change the code:
return state.map((todo, index) =>
action.index === index ?
{ text: todo.text, completed: !todo.completed } :
todo
)
:
state[action.index].completed = !state[action.index].completed;
return state;
The state that was passed to the reducer is deprecated anyway, so whether it changed or not, it can't be used anywhere (and if I'm not mistaken, what Redux really does is it ignores the previous state and takes the new one as the "source of truth"). Therefore, only the new state returned by the function is important.
So if I follow this approach while changing the state directly in the reducer and returning that, what could create the error in my application? Any idea?
source to share
Dealing with reductions and the reducer action model is all about pure functions. Reducers should be pure functions, which means they shouldn't mutate state. Pure functions take input and return new output. In case redux did not use this pattern and the state was mutated, then the data would be unreliable and, as a result, cause errors in your application, for example, your reactive components will not be updated.
source to share
The Redux core doesn't care about immutability. It also doesn't actually do anything to prevent mutations, either inside reducers or elsewhere in your application. However mutations will break debugging in time as well as React-Redux function connect
. There's a new Redux FAQ section on Immutable Data that goes into more detail on how and why Redux relies on immutability, and the question of Why isn't a component re-rendered? ...
Also, I am currently working on a blog post that will discuss the technical limitations that Redux really requires, as well as how you plan to use Redux and how Redux can be used. I hope this post appears within the next week. If you're interested, follow my blog at http://blog.isquaredsoftware.com .
source to share