🌈个人主页：前端青山
🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来React篇专栏内容:React-RTK
目录
1、介绍
2、安装
3、编写RTK使用示例
4、官方提供项目包示例
创建 Redux Store
定义 Slice
创建 Async Thunk
在 React 组件中使用
1、介绍
Redux是reactjs中进行组件状态共享的js库，工具。基于flux思想实现
ReduxToolKit 是redux官方提供的一种编写redux的范本。toolkit工具包
2、安装
# yarn
javascript">yarn add redux @reduxjs/toolkit react-redux3、编写RTK使用示例
store/index.js
javascript">/*** createSlice 创建分片 分模块* configureStore 配置store仓库* RTK工具库里带的方法** */
import { createSlice, configureStore } from '@reduxjs/toolkit'
const counterSlice = createSlice({// 模块的命名name: 'counter',// state初始值initialState: {value: 0},// 操作方法reducers: {// action 代表处理的对象参数// type:执行的方法名称// payload:传递的参数incremented: (state,action) => {console.log(action);// Redux Toolkit 允许在 reducers 中编写 "mutating" 逻辑。// 它实际上并没有改变 state，因为使用的是 Immer 库，检测到“草稿 state”的变化并产生一个全新的// 基于这些更改的不可变的 state。state.value += action.payloadconsole.log(state.value);},decremented: (state) => {state.value -= 1}}
})
export const { incremented, decremented } = counterSlice.actions
// 将各模块汇总 进行配置为同一的store
const store = configureStore({reducer: counterSlice.reducer
})
export default store
// 可以订阅 store
// store.subscribe(() => console.log(store.getState()))
// 将我们所创建的 action 对象传递给 `dispatch`
// store.dispatch(incremented())
// {value: 1}
// store.dispatch(incremented())
// {value: 2}
// store.dispatch(decremented())
// {value: 1}
App.jsx
javascript">import React, { Component } from 'react'
// 导入store
import store, { incremented } from './store'
export default class App extends Component {// 初始化操作constructor() {super()// 监听器 订阅 订阅state变化store.subscribe(() => {this.setState({ value: store.getState().value })})}state = {value: 0}render() {// console.log(store.getState().value)return (<div><button onClick={() => store.dispatch(incremented(100))}>{this.state.value}</button></div>)}
}
4、官方提供项目包示例
redux官方提供了一个RTK工具包编写的redux的计算器实例
javascript"># 生成RTK项目包
npx create-react-app rtk-ts --template redux-typescript
# yarn
yarn create react-app rtk-ts --template redux-typescriptReact-RTK 的作用：
-
简化 Redux 开发流程：React-RTK 提供了一系列预封装的工具函数和中间件，如
createSlice、createAsyncThunk等，大大减少了编写 Redux 相关代码的工作量，避免了繁琐的样板代码。 -
提升代码质量与可维护性：RTK 遵循 Redux 最佳实践，确保代码结构清晰、逻辑一致。内置的 Immer 库允许通过修改现有状态的副本来描述状态更新，无需手动实现 immutability。同时，TypeScript 支持增强了类型安全。
-
优化性能与开发体验：RTK 自动配置 Redux DevTools Extension，方便开发者监控和调试应用状态变化。它还默认集成了
redux-thunk以支持异步操作，并通过代码生成优化了 store 的创建过程。
创建 Redux Store
首先，使用 configureStore 函数创建 Redux store，通常在应用的主入口文件（如 index.js 或 App.js）中进行：
javascript">import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers'; // 导入已合并的 Reducerconst store = configureStore({reducer: rootReducer,
});// 如果使用 React-Router，可能需要将 store 与 Provider 组件一起包裹应用
import { Provider } from 'react-redux';
import App from './App';ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root')
);定义 Slice
使用 createSlice 函数来定义一个 Redux slice，包含相关的 action types、action creators 和 reducer：
javascript">import { createSlice } from '@reduxjs/toolkit';const initialState = {items: [],loading: false,error: null,
};const mySlice = createSlice({name: 'mySlice',initialState,reducers: {// 纯同步 reduceraddItem(state, action) {state.items.push(action.payload);},removeItem(state, action) {state.items = state.items.filter(item => item.id !== action.payload);},},extraReducers: builder => {// 异步操作处理（通常使用 createAsyncThunk 创建）builder.addCase(fetchItems.pending, state => {state.loading = true;state.error = null;});builder.addCase(fetchItems.fulfilled, (state, action) => {state.items = action.payload;state.loading = false;});builder.addCase(fetchItems.rejected, (state, action) => {state.loading = false;state.error = action.error.message;});},
});export const { addItem, removeItem } = mySlice.actions;export default mySlice.reducer;创建 Async Thunk
对于涉及异步操作（如 API 调用）的状态变更，使用 createAsyncThunk 创建一个 thunk action：
javascript">import { createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';export const fetchItems = createAsyncThunk('mySlice/fetchItems', async () => {const response = await axios.get('/api/items');return response.data;
});在 React 组件中使用
在 React 组件中，通过 useSelector 和 useDispatch 钩子访问和操作 store：
javascript">import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addItem, removeItem, fetchItems } from './mySlice';function ItemList() {const dispatch = useDispatch();const { items, loading, error } = useSelector(state => state.mySlice);useEffect(() => {dispatch(fetchItems());}, [dispatch]);const handleAddItem = () => {const newItem = /* 新建一个 item 对象 */;dispatch(addItem(newItem));};const handleRemoveItem = (itemId) => {dispatch(removeItem(itemId));};if (loading) return <div>Loading...</div>;if (error) return <div>Error: {error}</div>;return (<div>{/* 渲染 items 列表，添加/删除按钮 */}</div>);
}export default ItemList;
