- Redux is one of the most trending libraries for front-end development in today’s marketplace.
- There are three principles in redux:
- Single source of truth
- State is read-only
- Changes are made with pure functions
Single source of truth:
- The entire application is stored in an object/ state tree within a single store.
- It debugs or inspects the application and easier to keep track of changes over time.
- It has been traditionally difficult to implement – Undo/Redo.
- If all of your states is stored in a single tree, it can be suddenly trivial to implement.
For example,
[pastacode lang=”markup” manual=”console.log(store.getState())%0A%0A%2F*%20Prints%0A%7B%0A%C2%A0%20visibilityFilter%3A%20’SHOW_ALL’%2C%0A%C2%A0%20todos%3A%20%5B%0A%C2%A0%C2%A0%C2%A0%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20text%3A%20’Consider%20using%20Redux’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20completed%3A%20true%2C%0A%C2%A0%C2%A0%C2%A0%20%7D%2C%0A%C2%A0%C2%A0%C2%A0%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20text%3A%20’Keep%20all%20state%20in%20a%20single%20tree’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20completed%3A%20false%0A%C2%A0%C2%A0%C2%A0%20%7D%0A%C2%A0%20%5D%0A%7D%0A*%2F” message=”” highlight=”” provider=”manual”/]
State is read-only:
- The only way to change the state is to emit an action, an object describing what happened.
- It ensures that neither the views nor the network callbacks will ever write directly to the state.
- All changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for.
- The minimal representation of data is just like state, the action is the minimal representation of the change to that data.
For example,
[pastacode lang=”markup” manual=”store.dispatch(%7B%0A%20%20type%3A%20’COMPLETE_TODO’%2C%0A%20%20index%3A%201%0A%7D)%0A%0Astore.dispatch(%7B%0A%20%20type%3A%20’SET_VISIBILITY_FILTER’%2C%0A%20%20filter%3A%20’SHOW_COMPLETED’%0A%7D)%0A” message=”” highlight=”” provider=”manual”/]
Changes are made with pure functions:
- To specify how the state tree is transformed by actions, you write pure reducers.
- Pure functions are those whose return value depends solely on the values of their arguments.
- Reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.
For example,
[pastacode lang=”markup” manual=”function%20visibilityFilter(state%20%3D%20’SHOW_ALL’%2C%20action)%20%7B%0A%20%20switch%20(action.type)%20%7B%0A%20%20%20%20case%20’SET_VISIBILITY_FILTER’%3A%0A%20%20%20%20%20%20return%20action.filter%0A%20%20%20%20default%3A%0A%20%20%20%20%20%20return%20state%0A%20%20%7D%0A%7D%0A%0Afunction%20todos(state%20%3D%20%5B%5D%2C%20action)%20%7B%0A%20%20switch%20(action.type)%20%7B%0A%20%20%20%20case%20’ADD_TODO’%3A%0A%20%20%20%20%20%20return%20%5B%0A%20%20%20%20%20%20%20%20…state%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20text%3A%20action.text%2C%0A%20%20%20%20%20%20%20%20%20%20completed%3A%20false%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20case%20’COMPLETE_TODO’%3A%0A%20%20%20%20%20%20return%20state.map((todo%2C%20index)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20if%20(index%20%3D%3D%3D%20action.index)%20%7B%0A%20%20%20%20%20%20%20%20%20%20return%20Object.assign(%7B%7D%2C%20todo%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20completed%3A%20true%0A%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20return%20todo%0A%20%20%20%20%20%20%7D)%0A%20%20%20%20default%3A%0A%20%20%20%20%20%20return%20state%0A%20%20%7D%0A%7D%0A%0Aimport%20%7B%20combineReducers%2C%20createStore%20%7D%20from%20’redux’%0Aconst%20reducer%20%3D%20combineReducers(%7B%20visibilityFilter%2C%20todos%20%7D)%0Aconst%20store%20%3D%20createStore(reducer)%0A” message=”” highlight=”” provider=”manual”/]