学习react第三天

Redux

类似vuex和pinia

先安装对应包和插件

npm install @reduxjs/toolkit react-redux

使用步骤

1.配置子模块

相关参数：createSlice（创建仓库），name，initialState，reducers，counterStore.actions，counterStore.reducer

import { createSlice } from "@reduxjs/toolkit"const counterStore = createSlice({// 名称name: "counterStore",// 初始状态数据initialState: {count: 0,   },// 修改数据方法reducers: {increment(state) {state.count += 1},decrement(state) {state.count -= 1}},
})// 从counterStore中解构出counterCreater方法导出
export const { increment, decrement } = counterStore.actions
// 获取counterStore的reducer导出
const counterReducer = counterStore.reducer
export default counterReducer

2.导入根store组合

相关参数：configureStore（合并子仓库）

import counterReducer from "./modules/counterStore";
import { configureStore } from "@reduxjs/toolkit";
import channelReducer from "./modules/channelStore";const store = configureStore({reducer: {counterStore: counterReducer,channelStore: channelReducer,},
}); export default store;

3.在全局注册

相关参数：Provider

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import store from './store/index.js'
import { Provider } from 'react-redux'createRoot(document.getElementById('root')).render(<StrictMode>{/* 注入redux */}<Provider store={store}><App /></Provider></StrictMode>,
)

4.在组件中获取store中的数据和修改数据的方法

相关参数：useDispatch（获取dispatch）, useSelector（获取对应store中的数据）

import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from '@/store/modules/counterStore.js'
import './App.css'function App() {const { count } = useSelector(state => state.counterStore)const dispatch = useDispatch()return (<div className="App"><h1>Count: {count}</h1><button onClick={() => dispatch(increment())}>count+</button><button onClick={() => dispatch(decrement())}>count-</button></div>)
}export default App

5.传参方法

相关参数：action.payload

addToNumber(state, action) {// action.payload 是传递过来的参数state.count += action.payload
}

6.异步传参

定义异步请求函数来dispatch reducers来修改数据

// 异步请求
const getChannelList = () => {return async (dispatch) => {const res = await axios.get('http://geek.itheima.net/v1_0/channels')dispatch(setChannelList(res.data.data.channels))}
}

在组件页面调用的时候，要在useEffect钩子里面调用

  useEffect(() => {dispatch(getChannelList())}, [dispatch])