redux

1、安装、

npm i @reduxjs/toolkit react-redux -S

2、redux核心概念

store仓库   state数据   action动作   reducer数据处理器     dispatch动作触发器

仓库中有数据state和处理器reducer

仓库外通过dispatch发送action动作

触发reducer返回新的数据state

3.定义仓库

src/store/index.js

import { configureStore } from '@reduxjs/toolkit'

//  导入处理器

export const store=configureStore({

reducer:{ }

})

4、全局注入仓库

src/main.js

// 导入仓库

import { store } from "./store/index"

// 导入Provider

import { Provider } from "react-redux"

ReactDOM.createRoot(document.getElementById('root')).render(

  <Provider store={store}>

    <App />

  </Provider>

)

5、注册仓库片段

src/store/counterSlice

import { createSlice } from "@reduxjs/toolkit"

// 定义初始化状态

const initialState = { value: 0 }

// 创建切片

const counterSlice = createSlice({

    // 切片名称

    name: 'counter',

    // 初始装填

    initialState,

    // 定义处理器

    reducers: {

        // 处理加法

        increment: (state) => {

            state.value += 1

        },

        // 处理减法

        decrement: (state) => {

            state.value -= 1

        },

        addValue: (state, action) => {

            // action.payload  为传入的参数

            state.value += action.payload

        }

    }

})

// 导出处理器

export const { increment, decrement, addValue } = counterSlice.actions

// 导出切片

export default counterSlice.reducer

// 导出异步操作动作

export const syncAddValue = (value) => (dispatch) => {

    setTimeout(() => {

        dispatch(addValue(value))

    }, 2000)

}

6、使用仓库

src/App.jsx

// 导入selector

import { useSelector, useDispatch } from "react-redux"

// 导入动作

import { increment, decrement, addValue,syncAddValue } from "@/store/counterSlice"

 

function DashView() {

    // 从store中获取数据

    const value = useSelector((state) => state.counter.value)

    // 获取idspatgh

    const dispatch = useDispatch()

    return (

        <div>

            <p>counter的value值：{value}</p>

            <button onClick={() => dispatch(increment())}>+1</button>

            <button onClick={() => dispatch(decrement())}>-1</button>

            <button onClick={() => dispatch(addValue(5))}>+5</button>

            <button onClick={() => dispatch(syncAddValue(8))}>等待两秒+8</button>

        </div>

    )

}

export default DashView

7、redux拓展

全局状态管理器

https://www.redux.org.cn/