学习react第三天

Redux

类似vuex和pinia

先安装对应包和插件

javascript 复制代码

npm install @reduxjs/toolkit react-redux

使用步骤

1.配置子模块

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

javascript 复制代码

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（合并子仓库）

javascript 复制代码

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

javascript 复制代码

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中的数据）

javascript 复制代码

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

javascript 复制代码

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

6.异步传参

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

javascript 复制代码

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

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

javascript 复制代码

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