【React】Redux Toolkit的使用

1. 背景

Redux Toolkit 出现的背景可以追溯到对 Redux 的使用和开发中出现的一些常见模式和问题。Redux 是一个非常强大的状态管理库，但在实际使用中，它可能涉及到一些繁琐的模板代码编写，比如定义 action 类型、编写 action 创建函数、编写 reducer 等等。同时，Redux 的设计哲学也是相对低级的，需要开发者对一些细节进行处理。
  为了简化 Redux 的使用，提高开发效率，并且让 Redux 更易于理解和维护，Redux Toolkit 应运而生。Redux Toolkit 是 Redux 官方推荐的工具集，它旨在提供一组工具和最佳实践，帮助开发者更快速地编写 Redux 代码，并且在不牺牲灵活性的前提下提供更好的开发体验。

Redux Toolkit 的出现解决了几个问题：

1. 简化 Redux 的使用：Redux Toolkit 提供了一组工具和函数，可以帮助开发者更轻松地定义 action、编写 reducer，并且提供了一种更简洁的方式来组织和管理状态。

2. 减少样板代码：Redux Toolkit 使用了一些现代 JavaScript 的特性，比如 immer 库来处理不可变性，以及 createSlice 函数来自动生成 action 类型和 action 创建函数，从而减少了大量的样板代码。

3. 默认集成 Redux DevTools Extension：Redux Toolkit 默认集成了 Redux DevTools Extension，使得开发者可以更方便地进行状态管理调试和监控。

4. 提供更好的性能：Redux Toolkit 在内部做了一些优化，比如使用了 immer 库来实现不可变性，这使得 Redux Toolkit 在性能上有一些优势。

总的来说，Redux Toolkit 的出现是为了让 Redux 更易于上手、更高效、更灵活，从而提升开发者的开发体验和代码质量。

2.文档

英文文档:
https://redux-toolkit.js.org/introduction/getting-started

 
中文文档：
https://cn.react-redux.js.org/introduction/getting-started/

3. 使用

3.1 安装

# 如果你使用 npm:
npm i @reduxjs/toolkit

# 或者你使用 Yarn:
yarn add @reduxjs/toolkit

3.2 创建入口文件 redux

- redux
 	- index.js
 	- reducer.js 

3.3 redux/index.js

import { configureStore } from "@reduxjs/toolkit";
import { SetInitState } from "./reducer";

const store = configureStore({  
  reducer: {
    SetInitState,
  }
})

export default store;

3.4 redux/reducer.js

import { createSlice } from '@reduxjs/toolkit';

// 初始状态
const initState = {
  count: 1
}

// 创建redux切片对象
export const setInitState = createSlice({
  name: "appState", // 切片名称 用来标识redux
  initialState: initState, // 需要管理的状态
  reducers: {  // 配置reducer 用以更新的状态
    countAdd (state) {
      state.count++;
    },
    setCount (state, action) {
      state.count = action.payload;
    }
  }
})

// 导出状态
export const { countAdd, setCount } = setInitState.actions;
// 导出reducer
export const SetInitState = setInitState.reducer;

3.5 使用示例

1. 根目录index.js中使用Provider包裹根组件

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider  >
  </BrowserRouter>
)

reportWebVitals()

2. 子组件中使用

import { useSelector } from 'react-redux'

const App = () => {
  // 拿到redux定义的初始状态
  const { count } = useSelector((state) => state.SetInitState)

  return (
  <div>
      {count}
    </div> )
 }