More into Redux…
Redux is a standalone library that can be used with any UI layer or framework like, React, Angular, Vue and so on. If you are using Redux with any kind of UI framework, you will normally use a UI binding library to tie Redux together with your UI framework, rather than directly interacting with the store from your UI code.
As for architecture, anecdotal evidence is that Redux works well for varying project and team sizes. Redux is currently used by hundreds of companies and thousands of developers, with several hundred thousand monthly installations from NPM.
With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store.
Why need Redux or any State management tool
Redux was originally designed for use with React. Obviously now it can be used with multiple UI layers. As the React or Angular applications keep growing bigger, state management becomes tough without a separate tool; and handling them amidst various components gets difficult.
For example, it gets difficult when the children components are sharing states, it gets difficult to maintain and less predictable.
How Redux Works
There is a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another. There are three building parts: actions, store, and reducers.
Actions
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch(). Actions must have a type property that indicates the type of action being performed. Types should typically be defined as string constants.
Example:
Reducers
Reducers specify how the application’s state changes in response to actions sent to the store. A reducer is a pure function that takes in the initialState and the action.type and returns the next state. Reducers are just functions — you can organize them and subdivide them any way you want, and you are encouraged to break them down into smaller, reusable functions.
Example:
They do not change the data in the object passed to them or perform any side effects, API calls, or call non-pure functions in the application. Given the same object, they should always produce the same result.
Reducers can be defined in different files and then combined in index.js or any other proper approach which you feel. To return new state objects, instead of mutating the previous state, we can start with a single reducer, and as the app grows, split it off into smaller reducers that manage specific parts of the state tree.
Store
Store is the object that brings actions and reducers together. There is a single store in a Redux application. We used combineReducers() to combine several reducers into one. We will now import it, and pass it to createStore() .
The data flow in a Redux architecture is unidirectional.
The data lifecycle in any Redux app follows these 4 steps:
- You call
store.dispatch(action). - The Redux store calls the reducer function you gave it.
- The root reducer may combine the output of multiple reducers into a single state tree.
- The Redux store saves the complete state tree returned by the root reducer.
Something more…
For connecting our UI with APIs we need Asynchronous Actions. The standard way to do it in Redux is to use the Redux Thunk Middleware. When an action creator returns a function, that function will get executed by the Redux Thunk middleware. To include the Redux Thunk middleware in the dispatch mechanism, we use the applyMiddleware() store enhancer from Redux. Middleware is some code you can put between the framework receiving a request, and the framework generating a response. Redux middleware creates a bridge between dispatching an action and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more. To connect with the React App you need to use connect and mapStateToProps , which needs to be defined as a function.
In Redux:
- The global state of the application is stored in a single store in an object tree
- The state can be changed only when an action is performed (or called), else it is read-only
- The changes are handled by pure functions or reducers only
References
These are very helpful in understanding state management and Redux workflow —
