Basics of Redux
What is Redux ???
Before we start Redux first we know Flux and Elm because redux internally uses these technologies.
Flux: Flux is the application architecture that Facebook uses for building client-side web applications.
Redux: Redux is a Flux implementation that remove complicity of flux and use the Elm logic, the basic idea of redux is the entire application state is kept on single store, redux run in different environment (Clint, Server, Native).
Core concept of Redux
- Pure/Impure functions
In redux, all the application state is stored as a single object, its a good idea to think of its shape before writing any code, the shape of state is up to you it can be array, object, or whatever you want, the state object in redux is immutable / read only, you cannot mutate the state object but return the new object if state changes.
A store holds the whole state tree of your application, the only way to change the state inside it is to dispatch an action on it, a store is not a class, It's just an object with a few methods on it.
List of store methods.
Pure functions: A pure function doesn't depend and doesn't modify the states of variables out of its scope, doesn't have any side effect, doesn't have any observable like (Network access, DB call), doesn't modify the value that is pass as argument.
Impure functions: They may have side effect, maybe access network or perform curd operation, operate the DOM, they may overwrite the value that you as argument.
Reducers are just pure functions that take two arguments and return the next state.
- Previous State.
Remember to return new state objects, instead of mutating the previous state, you can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree.
Principal of Redux
Three principal of Redux.
- Single source of truth.
- State is read only.
- Changes are made with pure functions.
Single source of truth
The state of your whole application is stored in an object tree within a single store,
this makes it easy to create universal apps, a single state tree also makes it easier to debug or inspect an application, it also enables you to persist your app's state in development, for a faster development cycle.
State is read only
The only way to change the state is to emit an action, an object describing what happened.
Changes are made with pure functions.
To specify how the state tree is transformed by actions, you need to write pure reducers.