Redux in a nutshell
Redux only has a single store that holds no logic by itself. Actions are dispatched and handled directly by the store, eliminating the need for a standalone dispatcher. In turn, the store passes the actions to state-changing functions called reducers. Another layer may be included — i.e, a middleware, it could be an API middleware or client-side middleware which every action passed through. Middleware can stop, modify or add more actions or authenticate.
Base of Redux
- Store: Control the state.
- Actions: Describe the changes we want to make.
- Reducers: Services that change the state based on requested action. (Thanks to Johnny Magrippis for pointing this out)
- Middleware: Handles housekeeping tasks of the app.
N/B: Reducers, never change their state, it is immutable. An entire application state is kept in a single location, the store- This provides enormous benefits during debugging, serialization and development.
Principles of Redux
- The State Tree Principle: The state of an application is stored in an object tree within a single store, meaning everything that changes in an app is contained in a single object called state or state tree.
- The Action Tree Principle: A state tree cannot be modified or written to. To change a state, an action has to be dispatched. An action ensures that views nor the network callbacks will ever write directly to the state. Actions must be plain JS objects, that can be logged, serialized, stored and later replayed for debugging or testing purposes.
- The Reducer Tree Principle: Reducers exists to specify how the state tree is transformed by actions. Reducers are pure functions that takes the previous state and an action then return the next state. Using the default switch, it must return current state for undefined actions.