In this Writer’s Room article, Works Community Member Ebenezer Adjei delves into the possibilities that Redux Toolkit can offer in terms of State Management.
The Redux Toolkit is an updated version of Redux that offers additional features alongside those of the original. We strongly recommend utilizing the optimized version of Redux for use with the Toolkit, and in this article, we will provide an overview of the framework and explain why using the core Redux package in applications may not be the best option. If you are already familiar with Redux, feel free to skip ahead to the section titled “Use Redux Toolkit instead of core Redux”.
The prevalence of single-page apps has popularized the concept of “state management”.
The internal handling of data and its accessibility from various points within the application is a central focus of Modern Single Page Applications (SPAs). However, creating a reliable app that is ready for production is not simply a one-time task. It is crucial to adhere to certain best practices throughout the development process. Accurate and consistent data processing from a single authoritative source is essential. In addition, for larger applications, extra effort may be necessary to maintain data and state consistency. As a result, selecting the most suitable method for state management can be overwhelming.
Throughout time, various libraries have been developed to serve particular purposes. Redux is among the most widely-used libraries and is commonly employed during React app development. It is worth mentioning, though, that Redux is not a mandatory component of React app creation – only utilize it if it is necessary for your app. Even if Redux is not utilized, it is still feasible to craft a fully functional and efficient React app. That being said, Redux persists as a potent means for handling an app’s state and data flow.
The Redux Process
Redux is both a paradigm and framework that allows for the management and modification of application state through the use of “actions” – events that trigger changes in a consistent manner. It serves as a central repository for application-wide state.
Below is a typical configuration example featuring Redux:
- Redux actions are comprised of two sections: the type and the payload. The action’s type is provided within the payload, and the store’s modifications are performed based on this information by the reducer. UI elements will dispatch functions called “actions” to Redux, which will then send them to the reducer through a middleware known as the dispatcher.
- Reducers are required for updating the Redux store. After receiving an action, the reducer modifies the state based on the type and payload of the received action.
- Data is stored in the state. When a component is bound to the state and that state changes, the bound component is re-rendered.
Redux and its Usage in Your App
In a Redux-based application, any component may directly access the store without requiring help from intermediary components. The architecture implies that there is a shared database used by all components to retrieve data. When an action is dispatched to the reducer, the store is updated and all related components are notified. This simplifies the process for parent components when notifying their children of changes in state. Without Redux, updates originating from the parent would need to traverse all dependent components, which is a time-consuming process that can result in “prop drilling” – where data has to travel through several layers of a system before reaching the required layer.
Warnings and Precautions Regarding the Use of Redux
Prior to deciding whether or not to utilize Redux, take into account the following widespread use cases:
- Many regions of the application require a considerable amount of state.
- The application state is continuously subject to updates.
- The reasoning behind such changes may be complex.
- The codebase is significant, implying that numerous individuals may be involved in its development.
- It is crucial to monitor the time series of state updates.
- Consider using the Redux toolkit instead of implementing Redux directly.
Redux Documentation
Replace the original Redux with the Redux toolkit.
The advent of the Redux Toolkit has resulted in a significant upswing in Redux’s popularity. Those familiar with previous Redux versions will be pleasantly surprised by the Toolkit’s advancements, which are genuinely groundbreaking.
It is not recommended to use the original Redux library for implementing Redux in projects. Instead, use the Redux framework. I’m excited to share my experience with the Redux toolkit, which has been excellent. In the past, many developers faced challenges while setting up Redux and had to write a lot of boilerplate code. Defining action constants and passing them to action creators was a cumbersome process. To associate actions with the constants they represent, I had to use multiple switch statements. Even more, for custom actions, additional switch statements and constants were necessary, making the process monotonous and arduous. Fortunately, the Redux toolkit has streamlined this process.
The Redux Toolkit’s introduction was a significant milestone in the Redux ecosystem. Its contemporary approach has rendered classic Redux obsolete. Since switching to the new Toolkit, I have been hesitant to return to the original Redux for more advanced coding. The most recent version of the Toolkit is excellent, raising productivity by 50% compared to the prior Redux iteration.
The Redux toolkit boasts several advantages over the former Redux framework.
- It eliminates repetitive, generic code.
- Setting up is a breeze (installing packages and writing a lot of code is unnecessary).
- Efficiency is enhanced (time spent creating action constants can be allocated elsewhere).
- The Redux Toolkit now enables you to compose adjustable versions of previously unchangeable code. The Toolkit employs the Immer library underneath, which keeps track of any modifications to your state. Even if you change your state in a mutable way, the Immer library updates your store in an immutable manner.
Substitute the connect API with Redux hooks.
The Redux toolkit has introduced hooks for easy store access, simplifying data selection. Developers have long employed mapStateToProps and mapDispatchToProps to extract state from the store and dispatch actions to the reducer. Components had to be wrapped in a higher-level “connect” component. While both mapStateToProps and mapDispatchToProps still function effectively with the Redux toolkit, the provided hooks are more efficient. The upcoming section delves into scenarios in which using Redux hooks may prove advantageous.
- The future of hooks lies within Redux.
- Anticipating the future of React leans towards Redux hooks.
- Revamped hooks are shorter and easier to comprehend.
- Incoporating Typescript simplifies the usage of Redux hooks.
- Use these tools to choose specific sections of your state.
- Choosing state is advisable via “useSelector” instead of mapStateToProps.
- To streamline action dispatching, employ “useDispatch” over “mapDispatchToProps.”
Integrating the Redux framework into your application – A guide.
Installation of Redux toolkit is uncomplicated, and commencing is effortless.
Acquire and install the requisite packages as per the official documentation.
Construct a Redux Slice 2.
A slice encompasses both actions and reducers, and is considered the basic unit of state in the Redux store. It is recommended to maintain distinct components in their respective isolated slices, and avoid nesting objects within them. Building a slice requires a name string, an initial state value and a reducer function that dictates how the slice state can be altered. Furthermore, the slice allows exporting of actions and reducer functions. It is worth noting that in this case, there is no necessity to distinctly specify action constants, action creators or action reducers – as they are all part of the slice.
As a demonstration, take into account the following snippet:
It is crucial to observe that in the given code example, a selector with the name “selectCount” is employed to retrieve a value from state. Rather than assigning the selector within the slice, it can also be defined at the point of usage – an instance of which is the expression “useSelector((state) => state.counter.value)“. Selectors allow you to solely provide the relevant sections of the state, and not the entire state, to your components.
Installing and configuring Redux as a store
The store acts as a depot for all the data processed by the reducers established in the slice modules. This store can be accessed by the primary app module through a provider. By enveloping the primary app component with the store, any changes made to the store are promptly reflected in the app. Whenever the Redux store is modified, components that utilise selectors or mapStateToProps to connect to the store are updated and re-rendered with the latest state.
The use of a combined reducer function is not imperative when employing the Redux Toolkit; instead, the reducers can be sent to the store as an object. This is achievable as the combination of reducers is executed via a function furnished by the Redux Toolkit.
In conclusion, focus your store’s app development strategy
Integrating Redux into your individual components
Conclusion
The use of Redux is greatly streamlined with Redux Toolkit. To learn more, kindly refer to the official documentation.
While developing React applications, various tools are obtainable for state management. Choosing the ideal solution for a given situation necessitates an understanding of the requirements of the application.
To be clear, Redux is not a mandatory requirement for React app development, albeit it is highly proficient.
