References

为什么使用 Redux Toolkit？

The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:

"Configuring a Redux store is too complicated"

"I have to add a lot of packages to get Redux to do anything useful"

"Redux requires too much boilerplate code"

简而言之就是之前的 redux 配置难，写起来太复杂，各种 states, actions 和 reducers 搞得人头大。

快速开始

模拟一个简单的需求（如下图），点击 Submit 按钮，提交 username 和 email 到 redux 中，并展示到上面的卡片中。点击 Sign Out 按钮，清空 redux 中的用户信息。

安装 Redux 和 Redux Toolkit。

# NPM
npm install redux react-redux @reduxjs/toolkit
# or
# Yarn
yarn add redux react-redux @reduxjs/toolkit

以上述需求为例，创建一个 user slice。

// src/store/slices/user-slice.ts
import {createSlice, PayloadAction} from '@reduxjs/toolkit'

interface IState {
  username: string
  email: string
}

export const userSlice = createSlice({
  name: 'userSlice',
  // 初始状态值
  initialState: <IState>{
    username: '',
    email: ''
  },
  // reducers
  reducers: {
    // 设置 user
    setUser(state, action: PayloadAction<IState>) {
      Object.assign(
        state,
        {...action.payload}
      )
    },
    // 清空 user
    clearUser(state) {
      state.username = ''
      state.email = ''
    }
  }
})

// 导出 actions
export const {setUser, clearUser} = userSlice.actions

// 导出 reducers
export const reducer =  userSlice.reducer

将 user-slice.ts 引入到 store/index.ts 中

// src/store/index.ts
import {configureStore} from '@reduxjs/toolkit'
import {reducer as userReducer} from './slices/user-slice'

const store = configureStore({
  reducer: {
    user: userReducer
  }
})

// 导出类型
export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch

export default store

在 App.tsx 中，将 form 的值存入 store（在 Funtional Component 中使用）。

// src/App.tsx
import './app.scss'

import React, {useState} from 'react'
import UserClassComponent from './components/UserClassComponent'
import {useDispatch, useSelector} from 'react-redux'
import {AppDispatch, RootState} from './store'
import {setUser} from './store/slices/user-slice'

function App() {
  // 在函数组件中，使用 userSelector 获取 store 对象
  const user = useSelector((state: RootState) => state.user)

  // 获取 dispatch
  const dispatch: AppDispatch = useDispatch()

  // 用户信息
  const [userForm, setUserForm] = useState({
    username: '',
    email: ''
  })

  // 提交用户信息
  const clickSubmitButton = () => {
    // setUser 的参数，就是 action.payload 的值
    dispatch(setUser(userForm))
  }

  return (
    <div className="app">
      {/* 用户信息组件 */}
      <UserClassComponent/>

      <div className="form">
        <div className="form-item">
          <label>Username</label>
          <input
            value={userForm.username}
            onChange={(e) => {
              setUserForm(prevState => ({
                ...prevState,
                username: e.target.value
              }))
            }}/>
        </div>
        <div className="form-item">
          <label>E-mail</label>
          <input
            value={userForm.email}
            onChange={(e) => {
              setUserForm(prevState => ({
                ...prevState,
                email: e.target.value
              }))
            }}/>
        </div>
        <div className="actions">
          <button
            onClick={clickSubmitButton}>
            Submit
          </button>
        </div>
      </div>
    </div>
  )
}

export default App

在 UserClassComponent 中展示 store user 的信息，并且实现清空 store user 的操作（在 Class Component 中使用）。

// src/components/UserClassComponent/index.tsx
import './styles/index.scss'

import {Component} from 'react'
import {RootState} from '../../store'
import {connect} from 'react-redux'
import {clearUser} from '../../store/slices/user-slice'

interface IProps {
  [propsName: string]: any
}

interface IState {

}

class UserClassComponent extends Component<IProps, IState> {
  constructor(props) {
    super(props)
  }

  // 点击清空 store user 中的 state 值
  clickSignOutButton() {
    this.props.dispatch(clearUser())
  }

  render() {
    return (
      <div className="user-class-component">
        <p className="greeting">Hello!</p>
        {
          this.props.username
            ? <p className="username">{this.props.username}</p>
            : ''
        }
        {
          this.props.email
            ? <p className="email">{this.props.email}</p>
            : ''
        }
        <div className="actions">
          <button
            className="sign-out-button"
            onClick={this.clickSignOutButton.bind(this)}>
            Sign Out
          </button>
        </div>
      </div>
    )
  }
}

// 定义 mapStateToProps 方法
// 将 user-slice 中的 state 引入到组件的 props 中
function mapStateToProps({user}: RootState) {
  return {
    ...user
  }
}

// 通过 react-redux 的 connect 方法，
// 同时会将 dispatch 方法也挂在到组件的 props 上。
export default connect(mapStateToProps)(UserClassComponent)

更多功能，请查阅官网。

如有错漏，敬请指正。

React 18 + Redux + React Redux + Redux Toolkit

References

为什么使用 Redux Toolkit？

快速开始