Redux Toolkit
The official, opinionated, batteries-included toolset for efficient Redux development
Crash Course!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362775/images/8881202/pasted-from-clipboard.png)
![](https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8c3968371d9ef6f2a1486bd40a26.gif)
What
What is redux
Redux is a pattern for managing predictable & centralized application state, using events called actions."
What is redux-toolkit
The official, opinionated, batteries-included toolset for efficient & modern Redux development"
Redux Toolkit Stats
No | Item | Description |
---|---|---|
1. | Total Commits | 1,043 |
2. | Last Commit | 3 hours ago |
3. | Opened Issues | 78 out of 831 |
4. | Opened Pull Requests | 17 out of 554 |
5. | Total Stars | 6.2k |
6. | Total Fork | 473 |
7. | First Public Release | 24 Dec 2018 (v0.3.0) |
8. | Latest version | v1.6.1 |
Contributers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362775/images/8886342/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362775/images/8886344/pasted-from-clipboard.png)
Why
Motivation of Redux
-
Predictable: help you write large scale applications that behave consistently & easy to test
-
Centralized: immutable global state & logic enable powerful capabilities like undo/redo & state persistence
-
Debuggable: Redux DevTools make it easy to trace when, where, why and how your application state changed. Allow "time-travel debugging"
- Flexible: works with any UI layer & has a large ecosystem of addons
When Should I Use Redux?
- You have large amounts of application state that are needed in many places in the app
- The app state is updated frequently over time
- The logic to update that state may be complex
- The app has a medium or large-sized codebase, and might be worked on by many people
Redux Toolkit builds in Redux best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.
Motivation of Redux Toolkit
-
Simple: includes utilities to reduce boilerplate codes & simplify common use cases
-
Opinionated: provides good defaults and includes the most commonly used Redux addons
-
Powerful: let you write mutative update logic, automatic Typescript typings & eliminating the need to hand-write data fetching & caching logic
- Effective: Improved DX let you focus on the core logic and do more work with less code
Comparing State Management library
No | Item | Recoil | Jotai | Zustand | Redux / RTK |
---|---|---|---|---|---|
1. | Owner | Poimandres | Poimandres | ||
2. | Total Commits | 483 | 640 | 524 | 3,373 |
3. | Last Commit | 1 day ago | 5 days ago | 5 days ago | 2 days ago |
4. | Opened Issues | 131 out of 636 | 16 out of 262 | 22 out of 266 | 74 out of 155 |
5. | Opened Pull Requests | 15 out of 505 | 2 out of 360 | 5 out of 213 | 30 out of 1899 |
6. | Total Stars | 14k | 5.3k | 10.5k | 56.6k |
7. | Total Fork | 667 | 133 | 270 | 14.8k |
8. | First Public Release | 2 June 2020 (v0.0.8) | 30 Aug 2020 (v0.1.0) | 10 Apr 2019 (v0.0.3) | 2 June 2015 (v0.2.0) |
9. | Latest version | v0.4.1 | v1.3.2 | v3.5.10 | v4.1.1 |
Comparing State Management library
No | Item | Recoil | Jotai | Zustand | RTK |
---|---|---|---|---|---|
1. | Motivation | Solve re-render issue | Solve re-render issue | Redux but improved DX | Redux but improved DX |
2. | Learning Curve | Medium | ❤️ Low | ❤️ Low | Medium |
3. | Performance | ❤️ Best | ❤️ Best | Good | Good |
4. | Ecosystem | Low | Low | Low | ❤️ Best |
5. | Debuggability | Low | Low | Good | ❤️ Best |
6. | Time Traveling | Low | Low | Good | ❤️ Best |
7. | Where State resides |
React component tree | React component tree | Outside react | Outside react |
8. | State Model | Atomic (bottom-up) |
Atomic (bottom-up) |
Single Store (top-down) |
Single Store (top-down) |
9. | Code Splitting & Suspense | ❤️ Best | ❤️ Best | Low | Medium |
10. | Require Context Providers | ❤️ No | ❤️ No | Yes | Yes |
NPM Trends (with Redux)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362775/images/8886544/pasted-from-clipboard.png)
NPM Trends (without Redux)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362775/images/8886541/pasted-from-clipboard.png)
How
Three Principles
No | Principles | Description |
---|---|---|
1. | Single source of truth | The global state of your application is stored in an object tree within a single centralized store. |
2. | State is read only | The only way to change the state is to emit an action, an object describing what happened. |
3. | Changes are made with pure functions | To specify how the state tree is transformed by actions, you write pure reducers (immutability operations). |
Overview Concept
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362775/images/8886596/pasted-from-clipboard.png)
Source of Truth
One Way Data Flow
UI renders based on state & dispatch actions
Events trigger updates to state
Overview Concept
![](https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8c3968371d9ef6f2a1486bd40a26.gif)
Setup
> npm install @reduxjs/toolkit redux react-redux
1. Add the Redux Toolkit and React-Redux packages to your project:
// app/store.js
import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
reducer: {}
})
2. Create an (empty) Redux Store
Setup
3. Provide the Redux Store to React
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362775/images/8886580/pasted-from-clipboard.png)
Create a Counter state
4. Create a redux state slice
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362775/images/8886583/pasted-from-clipboard.png)
Create a Counter state
5. Add slice reducers to Store
![](https://s3.amazonaws.com/media-p.slid.es/uploads/362775/images/8886586/pasted-from-clipboard.png)
Use Redux State & Actions
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'
export function Counter() {
const count = useSelector(state => state.counter.value)
const dispatch = useDispatch()
return (
<div>
<div>
<button
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
Increment
</button>
<span>{count}</span>
<button
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
Decrement
</button>
</div>
</div>
)
}
Demo
Middleware & Async Operation
![](https://redux.js.org/assets/images/ReduxAsyncDataFlowDiagram-d97ff38a0f4da0f327163170ccc13e80.gif)
RTK Query
Part 2
Resources
Websites
redux-toolkit: toolset for efficient Redux development
By Wan Mohd Hafiz
redux-toolkit: toolset for efficient Redux development
- 295