Redux Toolkit

The official, opinionated, batteries-included toolset for efficient Redux development

Crash Course!

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

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 facebook Poimandres Poimandres facebook
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)

NPM Trends (without Redux)

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

Source of Truth

One Way Data Flow

UI renders based on state & dispatch actions

Events trigger updates to state

Overview Concept

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

 

Create a Counter state

4. Create a redux state slice

Create a Counter state

5. Add slice reducers to Store

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

RTK Query

Part 2

Resources

Websites  

Redux, Redux Toolkit, Recoil, Zustand, Jotai

Articles

redux-toolkit: toolset for efficient Redux development

By Wan Mohd Hafiz

Made with Slides.com

redux-toolkit: toolset for efficient Redux development

  • 331

More from Wan Mohd Hafiz