Redux Toolkit: How to Install, Use & Best Practices

If you're building a web application with complex needs, Redux is a powerful tool which can help you maintain a predictable state and simplify the development process. However, Redux can be a bit intimidating for beginners due to its verbose codes and excessive configuration. This is where Redux Toolkit comes in, with its ability to simplify the daunting process of using Redux.

According to a survey by Statista, 39.5 per cent were using React.js, making it one of the most frameworks for programmers. In this blog, we'll explore what Redux is and how its toolkit can make your life easier when working with Redux. Keep reading and learn how Redux Toolkit effectively streamlines state management in your React applications with our practical examples, tips, and techniques.

Table of Contents

1) What is Redux Toolkit?

2) Why Should You Use Redux Toolkit?

3) How Does Redux Work?

4) Steps to Install and Import Redux Toolkit (RTK)

5) What are the Prerequisites for Using Redux Toolkit? 

6) How to Use Redux Toolkit in Your Project?

7) Redux Toolkit and the Ducks Pattern

8) Best Practices for Structuring Your Redux Store

9) Benefits of Redux Toolkit (RTK)

10) Important Function Provided by Redux Toolkit

11) Conclusion

What is Redux Toolkit?

Redux Toolkit, launched in 2015, simplifies state management in complex applications, particularly for full-stack development with React.js. It builds on Redux, reducing verbosity and complexity by automating common tasks.

Redux Toolkit Key Points 

a) Simplicity: Enhances Redux by streamlining state management and reducing complexity.

b) React Integration: Commonly used with React.js to manage state more efficiently.

c) Created by Experts: Designed by Dan Abramov and Andrew Clark to address Redux's pain points.

d) Wide Adoption: Quickly became popular for its efficiency and ease of use in large-scale applications.

Redux Toolkit makes state management easier, especially for developers using React.



 

Why Should You Use Redux Toolkit?

Redux by itself is a powerful state management library, which makes the development of complex applications possible. However, Redux also comes with its fair share of challenges, such as excessive boilerplate codes, managing reducers and other similar issues, which can make the development process extremely complicated to errors. Using Redux Toolkit simplifies these issues, making it important for developers for the following reasons:   

1) Boilerplate Code Reduction 

Redux Toolkit reduces the amount of manually written code needed to create slices, actions and reducers. Without the help of Toolkit, the task of creating action types and reducer functions can be daunting due to the amount of manual code it requires. The Toolkit simplifies this process, which allows you to focus on the core logic of your application. Additionally, the toolkit allows you to define a reducer and action together, which are normally required to be defined separately without the help of the Toolkit. 

2) Simplifying Immutable Updates 

The term immutability in Redux refers to the stability of the state, as it ensures that state changes are predictable and traceable in nature. Redux Toolkit comes with many utility functions that simplify the process of updating the state. This allows you to simplify the process of creating new state objects while preserving the integrity of the existing state. As a result, you can write code feely while using his Toolkit without worrying about the immutability of the code. 

3) Managing Store Setup 

Setting up and configuring a Redux store from scratch can be a daunting task, especially if you are a beginner. The Redux Toolkit streamlines this process by offering a more intuitive and straightforward way to create and configure your Redux store. This abstraction process simplifies the store setup and reduces the potential for configuration errors, saving you valuable development time. 

How Does Redux Work?

Redux is like the brain behind state management in your JavaScript applications, ensuring your app stays organised even as it grows complex. At its core, Redux follows a unidirectional data flow, making your application predictable and easier to debug. Let’s break it down into its key components:

1) The Store

The store is the heart of Redux. It holds your application’s entire state in one place, like a central database for your app. This means no matter how big your app gets, you’ll always know where the data is coming from. Think of it as a neatly organised library – everything has its place, making it easy to access and update the data as needed.

2) Actions

An action is like a messenger delivering a package. It describes what you want to do without performing the task. Actions are plain JavaScript objects with a type of property that tells Redux what’s happening, and optionally, additional data. For example:

This action tells Redux to add a new to-do item while passing the relevant data (text). Actions are the starting point of the Redux data flow.

3) Dispatch

The dispatch function is like the postal service – it delivers actions to the store. When you dispatch an action, you’re saying, "Here’s what I want to do; please handle it." For example:

Once dispatched, the action travels through the system, triggering the reducers to update the store. Dispatch is the key to interacting with your application’s state.

4) Reducers

Reducers are the workers who get the job done. They listen for actions and decide how the state should change. A reducer is a pure function that takes the current state and an action, then returns a new state. For example:

 

Steps to Install and Import Redux Toolkit (RTK)

The Redux Toolkit (RTK) is the recommended approach for managing state in modern Redux applications. It simplifies setup and reduces boilerplate, making state management faster and more efficient. Here’s how you can install and import Redux Toolkit in your project:

Step 1: Redux Toolkit (RTK) Installation

To install Redux Toolkit and React-Redux, open your terminal and run the following command:

 

This installs everything you need to start using Redux Toolkit in your project.

Step 2: Importing Redux Toolkit (RTK)

Once installed, you can import the required functions and tools into your project. For example:

These imports allow you to set up a store and create slices for managing state efficiently.

What are the Prerequisites for Using Redux Toolkit?     

Using Redux Toolkit with your applications and code requires you to integrate it, thus setting up the prerequisites for the application. This process of initialising your project and toolkit is often called bootstrapping. This can be done easily by using certain commands within your system as follows: 

1) Node.js and Node Package Manager (npm) 

Your first prerequisite is to install Node.js and npm on your system, which will allow you to manage dependencies and run JavaScript applications. Alternatively, you can also use Yarn instead of npm if you prefer, as both serve the same purpose. When considering Yarn vs NPM, it’s important to weigh the performance and features of each to find the best fit for your project. 

2) Knowledge of JavaScript and React 

Redux Toolkit is an extension of Redux, which itself exists as an aid to React.js to simplify the application development process. React.js isn’t a standalone language but rather a framework that helps JavaScript adapt to certain tasks. As a result, using Redux and its Toolkit requires having a foundational knowledge of JavaScript. This familiarity with base technology is especially helpful if you plan to integrate the Redux Toolkit with a React application.    

3) Installing Redux Toolkit 

Using the toolkit in redux requires you to add it as a dependency in your project with a command. You can do so by running the following command in the terminal of your system: 

Once you run this command on npm, it will fetch and install the Redux Toolkit package from the official npm registry. Completing the installation process will allow you to use all the powerful features for state management in your application. 

4) Creating a Redux Store 

A store in Redux functions as a centralised sub, which allows you to store your application’s state. This store contains all the data of the application as well as its UI; hence, it is also referred to as the single source of truth in an application.   

The Redux Toolkit simplifies the store creation process, allowing you to focus on managing your application's data flow. To make use of this store, you need to set this up within your application as follows: 

How to Use Redux Toolkit in Your Project?

Once you understand the prerequisite for using the Redux Toolkit, you can implement it within your project. You can use the toolkit in a real-life project by following the steps:

1) Creating Your First Slice

A slice in redux essentially refers to a portion of the store within Redux, which comes with a reducer function and actions. These actions and reducers allow you to modify a specific part of your application’s state and organise your code more efficiently. Slice can simplify your codebase by removing the need to handle actions and reducers separately. 

In the code presented below, you can create a file named “todoSlice.js” in your file directory, which will define the slice. You can create your slice by defining the reducer function and actions in your code as follows:

Setting Up Redux Store

You can set up a Redux Store in a file named “store.js” to proceed with further steps. You can achieve this by using the following code:

Integrating Redux in React

Redux allows you to integrate it into your application by using a React component file. In this instance, the React component file is “App.js”, which will allow you to wrap your application with a provider component. This makes it necessary to import the important components for the process in the file directory:

Using Redux Actions in Components

Redux uses Actions to carry information, which allows you to understand what the necessary changes you need to make in the application’s state. In the instance of a counter slice, you will need to define action creators which encapsulate the logic for incrementing or decrementing counters. These action creators are responsible for triggering changes in the counter-state.

Redux Toolkit makes it easier to manage state modifications and actions for different parts of your application. This process enhances the clarity and maintainability of code while making the process of handling state changes much more efficient. You can also use Redux actions in your components to add and remove to-do items by using the code below:

Displaying and Removing To-do Items

Displaying or removing from a do list of items within applications refers to a list of tasks which need to be performed within a software. This process requires an option to delete tasks or mark them as complete within the system. You can achieve this in your application by using the following code:

Finalise Your Application

Now, you can integrate these components into your application as needed. Don't forget to import and render them within your App.js file or other relevant components.

Interested in becoming a Web Developer? Try our Web Development Training today!

Redux Toolkit and the Ducks Pattern

The Ducks Pattern, also known as the "Redux Ducks" pattern, is a proposal for organising and structuring Redux-related code in a more modular and self-contained manner. It aims to simplify the development and maintenance of Redux applications by co-locating all the related Redux logic for a particular feature or slice of the application state into a single module or file. Here is an example code of the Ducks pattern in Redux:

This Ducks pattern can be used in your module as follows:

This pattern was introduced as an alternative to the traditional approach of separating actions, action types, and reducers into separate files. Here are the key principles and characteristics of the Ducks Pattern:

1) Co-location

In the Ducks Pattern, all Redux-related code for a specific feature or slice of state resides within a single module or file. This means that actions, action types, and reducers for a particular feature are grouped together, providing a clear and self-contained structure.

2) Action Types

Action creators are functions responsible for generating actions in Redux. In the Ducks Pattern, these action creators are defined within the same module as the rest of the Redux logic. Action creators can directly reference the action types and payload data within the same module, resulting in more concise and maintainable code.

3) Action Creators

Action creators are functions responsible for generating actions in Redux. In the Ducks Pattern, these action creators are defined within the same module as the rest of the Redux logic. Action creators can directly reference the action types and payload data within the same module, resulting in more concise and maintainable code.

4) Reducers

The module contains the reducer function, which specifies how the state should change in response to dispatched actions. The reducer function takes the current state and an action as arguments and returns the new state based on the action type.

5) Exporting

To make the Redux logic accessible to other parts of the application, the Ducks module exports the reducer and any action creators that need to be used elsewhere. Exporting the reducer allows it to be combined with other reducers when configuring the Redux store.

6) Separation of Concerns

Each feature or slice of state in the application has its own Ducks module. This separation of concerns ensures that different parts of the application do not unintentionally interfere with each other. It also minimises the risk of naming conflicts between action types, as each module operates within its scope.

Learn to create beautiful interfaces with UX / UI Design Jumpstart Course today!

Best Practices for Structuring Your Redux Store

Structuring your Redux store is essential for maintaining a scalable and maintainable codebase. In this section, we'll discuss best practices to help you organise and structure your Redux store effectively. Consistent naming conventions are crucial for writing clean and readable Redux code. Adhering to clear naming conventions ensures that your actions, reducers, and slices are easily understandable by you and your team. Here are some naming guidelines:

1) Actions

There is a list of best practices you can follow while declaring and using action within your codes. Some of these practices are as follows: 

1) Use descriptive action-type names that convey the intent of the action. For example, instead of FETCH, use FETCH_USER_PROFILE.

2) Use uppercase letters and separate words with underscores for action-type constants. For example, FETCH_USER_PROFILE instead of fetchUserProfile.

Reducers

Use meaningful reducer function names. A reducer's name should indicate the slice of state it manages. For instance, if your reducer handles user authentication, name it authReducer. Keep reducer functions pure and avoid side effects. They should only depend on their input arguments and return a new state without modifying the existing state.

3) Slices (Redux Toolkit)

Name your slices descriptively based on the features they manage. For example, if your slice handles to-do items, name it todosSlice. Use the reducer and actions properties the slice exports to access the reducer function and action creators. This enforces consistency and simplifies integration.

4) Testing

Testing your Redux code is crucial to ensure its reliability and maintainability. Here are some testing techniques and tools to consider when working with Redux:

1) Unit Testing: Write unit tests for individual actions, reducers, and selectors. Use testing libraries like Jest and testing utilities provided by Redux Toolkit.

2) Integration Testing: Test the interactions between different parts of your Redux store. Ensure that actions correctly trigger state changes in reducers and selectors.

3) End-to-End Testing: Consider incorporating end-to-end tests that cover Redux interactions as part of your application's testing suite. Tools like Cypress can be valuable for this purpose.

4) Mocking: Use mocking libraries or manual mocks to simulate API calls or other external dependencies when testing actions or thunks. When testing actions or thunks that make API calls, you can use mocking libraries like jest.mock to simulate those API calls. Here's an example using Jest:

5) Redux DevTools: Leverage the Redux DevTools extension for browser-based debugging during development. It allows you to inspect state changes, actions, and dispatch history. Using the Redux DevTools extension in your application allows you to inspect state changes, actions, and dispatch history during development. Integration typically involves adding a middleware to your Redux store. Below is an example using the Redux Toolkit:

6) Snapshot Testing: For complex components connected to Redux, consider using snapshot testing libraries like react-test-renderer or Enzyme to capture component snapshots and identify unintended changes.

Snapshot testing is often used to capture the visual output of components, including those connected to Redux. Here's a basic example using Jest and react-test-renderer:

7) Redux Toolkit Testing Utilities: If you're using Redux Toolkit, take advantage of the testing utilities it provides, such as createSlice's reducers property for testing reducers.

8) Continuous Integration (CI): Integrate testing into your CI/CD pipeline to ensure your Redux code is tested automatically with each code change. If you're using Redux Toolkit, it provides testing utilities to simplify the testing of reducers and actions created using createSlice. Here's an example of testing a reducer using Redux Toolkit's createSlice:

Benefits of Redux Toolkit (RTK)

Redux Toolkit offers several advantages that make state management more efficient and user-friendly:

1) Simplified State Management: RTK makes managing state easier compared to traditional Redux.

2) Reduced Boilerplate: It minimises the amount of boilerplate code needed for most functions.

3) Official Recommendation: RTK is the officially recommended library for state management in Redux.

4) Convenient Wrapper Functions: These functions help reduce the lines of code you need to write.

Key Functions Provided by Redux Toolkit

RTK comes with a variety of powerful functions that streamline the development process:

1) configureStore: This function wraps the basic Redux createStore function, automatically adding middleware and enhancers.

2) createReducer: Replaces the classic reducer, making the code shorter and easier to understand.

3) createAction: A utility that returns an action creator function.

4) createSlice: Combines createAction and createReducer into a single function, streamlining the process.

5) createAsyncThunk: Takes Redux strings as arguments and returns a Promise, simplifying async actions.

6) createEntityAdapter: A utility that helps perform CRUD operations efficiently.

Interested in being a developer? Try our App & Web Development Training today!

Conclusion 

Redux Toolkit simplifies and streamlines the process of using Redux in your React applications. It reduces boilerplate, improves the developer experience, and encourages structured code. Following the steps outlined above, you can easily integrate the Redux Toolkit into your project and take advantage of its benefits.