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<typeof store.getState>;
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<number>) => {
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(
<Provider store={store}>
<App />
</Provider>,
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 (
<div>
<div>
<button
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
做加
</button>
<span> 这里是值{count} </span>
<button
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
做减
</button>
<button
aria-label="Increment number value"
onClick={() => dispatch(incrementByAmount(5))}
>
添加多个
</button>
</div>
</div>
);
};
export default Counter;
app.tsx 引入组件
import Counter from "./features/counter/Counter";
export default function App() {
return (
<div className="App">
<Counter />
</div>
);
}
