状态管理（三）- Redux Toolkit

redux toolkit 在react ts项目中实现简单的计数器 ： https://codesandbox.io/s/redux-ts-toolkit-y3wyz?file=/src/app/store.ts

image.png

如果你觉得redux写起来复杂又冗余，redux toolkit 获取有所减轻这种现象
redux toolkit是redux官方的，开箱即用的高效Redux开发工具集。
它包括几个实用程序功能，这些功能可以简化最常见场景下的Redux开发，包括配置store、定义reducer， 不可变的更新逻辑、甚至可以立即创建整个状态的“切片slice”，而无需手动编写任何action creator 或者 action type。

Redux Toolkit 它最初是为了帮助解决有关Redux的三个常见问题而创建的：

• “配置Redux store”过于复杂
• “我必须添加很多软件包才能开始使用redux做事情”
• “Redux有太多样板代码”

Redux-tookit包含了什么：

• configureStore()函数提供简化的配置选项。 它可以自动组合切片slice的reducer，添加你提供Redux中间件，默认情况下包含redux-thunk，并启用Redux DevTools扩展。
• createReducer()工具 让你自动做action type到reducer的对应，而不是编写switch...case语句。另外，它会自动使用immer库来让你使用普通的mutable代码编写更简单的immutable更新，例如state.todos[3].completed = true
• createAction() 工具 返回给定action type 字符串的action create 函数。 该函数本身已经定义了toString(), 因此可以代替常量类型使用
• createSlice() 函数接受一组化reducer函数，一个slice切片名和初始化状态initial state， 并自动生成具有相应action creator 和 action type 的slice reducer
• createSelector工具来源于Reselect库， 重新export出来以方便使用

官方示例- 实现计数器

1. 创建项目

这里我们选择ts模版

npx create-react-app redux-ts-toolkit --template typescript

2. 创建store

在src文件夹下面新建app目录，在app下添加store.ts 文件

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: { }
});
export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;

这里你需要提取RootState 和 AppDispatch 类型，以便根据需要引用他们

3. 创建reducer

这里我们用到了createSlice 创建“分片”，该函数可以基于你提供的 reducer 函数名自动化生成 action type 和 action creator
注意下面reducers 对象里面的键值对是对应的action的type 和 reducer， 这里回自动产生action，以下的这段代码就产生了三个action： type 分别是increment、decrement、incrementByAmount

//features/counter/counterSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

export interface CounterState {
  value: number;
}
//定义state的初始值
const initialState: CounterState = {
  value: 0
};
export const counterSlice = createSlice({
  name: "counter", 
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

添加Redux store 到根组件

//index.tsx
import { render } from "react-dom";
import { Provider } from "react-redux";
import { store } from "./app/store";

import App from "./App";

const rootElement = document.getElementById("root");
render(
  
    
  ,
  rootElement
)

编写Counter组件

useSelector 方法选择指定state的值

//features/counter/counterSlice.tsx
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../app/store";
import { decrement, increment, incrementByAmount } from "./counterSlice";
const Counter = () => {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();
  return (
    

      

         dispatch(increment())}
        >
          做加
        
         这里是值{count} 
         dispatch(decrement())}
        >
          做减
        
         dispatch(incrementByAmount(5))}
        >
          添加多个
        
      
    
  );
};
export default Counter;

app.tsx 引入组件

import Counter from "./features/counter/Counter";

export default function App() {
  return (
    

      
    
  );
}