reduxjs/toolkit 教学

Redux Toolkit是一个基于Redux的状态管理库，它提供了一些便捷的功能和工具，使得在React应用中集成和管理状态变得更加简单。它是Redux官方推荐的库，旨在简化Redux的配置和操作流程。

以下是Redux Toolkit教学的一些关键点：

1. **安装**：首先需要通过npm或yarn安装`@reduxjs/toolkit`。在项目根目录运行`npm install @reduxjs/toolkit react-redux`.

2. **创建store**：使用`createStore`创建一个Redux store，同时可以配置中间件、初始状态等。例如：

   import { configureStore } from '@reduxjs/toolkit';
   const store = configureStore({
     reducer: rootReducer,
     middleware: applyMiddleware(thunk),
   });

3. **slice管理**：使用`createSlice`来创建数据模型（slice），它自动生成action、reducer和selectors。如创建一个Todo slice：

   import { createSlice } from '@reduxjs/toolkit';
   const todoSlice = createSlice({
     name: 'todo',
     initialState: [],
     reducers: {
       addTodo: (state, action) => [...state, action.payload],
       removeTodo: (state, action) => state.filter(id => id !== action.payload.id),
     },
   });
   export const { addTodo, removeTodo } = todoSlice.actions;
   export default todoSlice.reducer;

4. **connect组件**：使用`useSelector`和`useDispatch` hooks从store获取数据并触发actions，如：

   import { useSelector, useDispatch } from 'react-redux';
   function TodoList() {
     const todos = useSelector(state => state.todo);
     const dispatch = useDispatch();
     // ...
   }

5. **派发action**：在组件内使用`dispatch`发送action到store，比如添加任务：

   function addTodo(text) {
     dispatch(addTodo({ text }));
   }