react学习——react-redux

1.安装依赖

npm i @reduxjs/toolkit react-redux

2.index.js

需要从react-redux中引入Provider的组件，用于提供一个上下文环境，包裹应用的跟组件，之后引入仓库，仓库会作为Provider的store属性

//1. 引入Provider
import { Provider } from "react-redux"
//2. 使用Provider组件包裹跟组件
root.render(<Provider><App></Provider>
)
//3.引入store
import store from "./redux/store"
//4. 在provider上创建store属性
root.render(<Provider store={store}><App></Provider>
)

3.创建store

从 toolkit中引入configStore，用于创建数据仓库

store.js
-----------------------------------------------------------
import {configStore} from "@reduxjs/toolkit"
import todoReducer from "./todolistSlice"
//创建仓库
export default configStore({//配置项reducer,用于计算reducer:{todo：todoReducer}
})
todolistSlice.js
-----------------------------------------------------------
//创建一个切片
import {createSlice} from "@reduxjs/toolkit"
export const todolistSlice = createSlice({//命名name: 'todoList',//初始化仓库数据initState:{list: []},//reducerreducer:{// state:仓库数据，payload传递过来的数据add(state,{payload}){state.list.push({content: payload,status: false})},del(state,{payload}){},change(state,{payload}){}}
})
//导出actions
export const {add,del,change} = todolistSlice.actions
//导出reducer，需要在store.js中的reducer使用
export default todolistSlice.reducer

4.组件连接仓库（获取数据）

使用useSelector 这个hook直接连接

import { useSelector } from 'react-redux';
//这里拿到的todo，就是直接指向todoList文件中的reducer
const list = useSelector((state)=>state.todo)

5.组件派发action（修改数据）

通过useDispatch获取，action直接从切片slice导出即可

//1.引入dispatch这个hook
import { useDispatch } from 'react-redux';
//2. 引入切片中的action
import {add} from "../redux/todolistSlice"
dispatch = useDispatch()
//3.派发修改
dispatch(add('你需要修改的内容'))