If you're a React developer, chances are you already know how complicated it can get when working with global/shared states. Nonetheless, nowadays, there are two main ways to use this concept:
- Context API.
It is essential to highlight that a learning curve is necessary to use both of these approaches in the best way possible. This view is based on the fact that its high complexity and verbosity come into focus whenever Redux is mentioned. This is even more pronounced when it comes to using Redux with Typescript.
However, in this article, the focus is on the Redux Toolkit, an official Redux library that makes it easy to configure and use all the resources offered by Redux. Suppose you've ever found Redux to be boring and challenging, I'm sure the explanations and examples I provide on how to implement Redux Toolkit with Typescript in React will help you reassess your position on the subject.
Table of Contents
- What is Redux?
- What is Typescript?
- What is Redux Toolkit?
- Why Redux Toolkit?
- Getting started with Redux Tool
What is Redux?
What is Typescript?
What is Redux Toolkit?
Redux Toolkit is the official Redux tool, opinionated, with batteries for efficient Redux development. It includes several utility functions that simplify the most common use cases of Redux, including:
- Store configuration.
- Setting dimmers.
- Immutable update logic.
You can also use it to create entire "slices" of state at once without writing any action creators or type of action manually.
Apart from the use cases, It also includes the most used Redux add-ons, such as Redux Thunk for asynchronous logic and Reselect for writing selector functions, such that you can use them right away. Essentially, the Redux Toolkit is intended to be the standard way of writing Redux logic, and it is highly recommended that you use it.
Why Redux Toolkit?
Firstly, the Redux Toolkit makes it easy to write good Redux applications. Additionally, it speeds up development by:
- Emphasizing adherence to best practices.
- Providing good default behaviors.
- Detecting errors.
- Making it easy to write simpler code.
Overall, the Redux Toolkit is beneficial to all Redux users, regardless of skill level or experience. This goes for whether you are a new Redux user setting up your first project or an experienced one who wants to simplify an existing application.
Getting Started with the Redux Toolkit
In this section, we will look at two main scenarios:
- Implementation within an existing project.
- Creating a new project.
1). Implementation Within an Existing Project
Add dependencies to your project:
After the dependencies are installed, create a file for your Redux Store. Ex: src/store/index.ts
Within this file, you must use the “configureStore” function of the Redux Toolkit to create your store and later export it.
Note; configureStore: Function that provides simplified configuration options to combine all your reducers or add any middleware.
Provide the Redux Store to React:
To create your reducers, use the Redux Toolkit's createSlice function.
You will need to set three properties in this function: name, initialState, and reducers.
- name: Used in action types (String)
- initialState: Initial state for the respective reducer (any)
- reducers: An object of reducer functions. Key names will be used to generate actions.(Object<string, function>)
Redux Toolkit allows us to write "mutating" logic in reducers. However, it doesn't actually mutate the state because it uses the Immer library, which detects changes to a "draft state" and produces a brand new immutable state based on those changes:
After creating the reducer, add it to the store:
After that, you can use the redux state and Actions inside your components.
To read the data, use the "useSelector" function, and for dispatch actions, use the "useDispatch" function:
2). Creating a New Project
Creating a new project with Redux Toolkit is very simple. All you need to use is this command:
Behind the scenes, the CRA will be used to create your React application. In the end, you will have a similar structure to this:
- app/hooks.ts: While you can import RootState and AppDispatch types for each component, it's better to create typed versions of the “useDispatch” and “useSelector” hooks for use in your application. This allows you to import them into any component files that need to use the hooks and avoids potential circular import dependency issues.
- app/store.ts: To use the "configureStore" function, no extra typing is required. However, you will want to use RootState and Dispatch typing inside files that will need this reference. Therefore, these definitions are created and exported within the store.ts file.
- features/counter/counter.module.css: Simply the file of the stylizations of the component created.
- features/counter/counter.tsx: Main component file, where dispatch functions triggers and global state values are used. In addition to all Html structures being present inside it.
- counterAPI.ts: Inside is a dummy function to mimic an asynchronous data request.
- counterSlice.spec.ts: File where tests are created for the component’s main features.
- counterSlice.ts: The location where reducers and actions are defined and all the logic to manage the global state and control so that data consistency is always maintained
Redux Toolkit is an excellent tool to give productivity to applications that use Redux, and together with Typescript, your applications will be reliable and easy to maintain.
As much as everything can be built only with Redux, the complexity and verbosity make the development slower and require a greater learning curve.
You May Also Be Interested In:
More cost-effective than hiring in-house, with Nearshore Boost, our nearshore software development service, you can ensure your business stays competitive with an expanded team and a bigger global presence, you can be flexible as you respond to your customers’ needs.
Learn more about our services by booking a free consultation with us today!