Redux入门:使用@reduxjs/toolkit构建React应用程序状态管理

随着应用程序复杂性的增加,有效管理应用程序状态变得越来越重要。Redux是一种流行的状态管理解决方案,随着应用程序复杂性的增加,有效管理应用程序状态变得越来越重要。Redux是一种流行的状态管理解决方案,但传统的Redux设置和使用过程比较繁琐。幸运的是,Redux官方团队推出了@reduxjs/toolkit,这个工具包极大简化了Redux在React项目中的使用.

在这里插入图片描述

传统Redux vs @reduxjs/toolkit

传统Redux:

需要手动编写action creators、action types和reducers
需要手动配置中间件和开发者工具
处理异步操作需要单独使用redux-thunk或redux-saga
不可变状态更新需要手动使用深拷贝或Object.assign等
需要手动编写选择器函数

使用@reduxjs/toolkit:

使用createSlice自动生成action creators和action types
使用configureStore自动配置中间件和开发者工具
内置createAsyncThunk处理异步操作
内置immer.js,简化不可变状态更新
提供createSelector创建选择器函数
代码更加简洁,减少样板代码

总的来说,@reduxjs/toolkit通过工具函数和opinionated的默认配置,极大简化了Redux的使用,提高了开发效率。它包装了许多常用功能,同时也保留了Redux可扩展的优势。

使用@reduxjs/toolkit的最小示例

一个使用@reduxjs/toolkit构建简单计数器的示例:

安装依赖

npm install @reduxjs/toolkit react-redux

创建 store

新建 store.js 文件:

import { configureStore } from '@reduxjs/toolkit';// 定义初始状态
const initialState = {counter: 0
}// 创建切片
const counterSlice = createSlice({name: 'counter',initialState,reducers: {// 定义修改state的reducerincrement(state) {state.counter++},decrement(state) {state.counter--}}
})// 导出 reducer 和 actions
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;// 配置store
const store = configureStore({reducer: {counter: counterSlice.reducer}
})export default store;

在React组件中使用

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store';const Counter = () => {const count = useSelector(state => state.counter.counter);const dispatch = useDispatch();return (<div><h1>{count}</h1><button onClick={() => dispatch(decrement())}>-</button><button onClick={() => dispatch(increment())}>+</button></div>)
}export default Counter;

在入口文件中提供store

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';const App = () => (<Provider store={store}><Counter /></Provider>
)export default App;