react使用npm i @reduxjs/toolkit react-redux

npm i @reduxjs/toolkit react-redux

创建一个 store文件夹，里面创建index.js文件和子模块文件夹

index,js文件写入以下代码

js 复制代码

import {configureStore} from '@reduxjs/toolkit'
// 导入子模块
import counterReducer from './modules/one'
import two from './modules/two'
const store=configureStore({
    reducer:{
        counter:counterReducer,
        XFQ:two
    }
})
export default store

two文件子模块里创建模块文件，文件里写入以下代码

js 复制代码

import { createSlice } from '@reduxjs/toolkit'
const countState = createSlice({
    name: 'count',
    // 初始化state
    initialState: {
        count: 0,
        name: '清',
        list: ''
    },
    // 修改数据的方法  这里面是同步的方法
    reducers: {
        // 增加
        inscrement(state) {
            state.count++
        },
        // 减少
        decrement(state) {
            state.count--
        },
        newName(state, value) {
            console.log('修改名称', value)
            state.name = value.payload
        },
        setList(state, value) {
            state.list = value.payload
        }
    }
})
// 解构出来 actionCreate函数
const { inscrement, decrement, newName, setList } = countState.actions
/**
 *
 *异步相当于  单独封装一个方法，然后这个方法调用同步里的某个函数方法

 注意： 异步方法要求 return 出去一个函数，而且 dispatch 是固定要写的，但是参数名自己随便定义
 *
 */
const YiBuFun = () => {
    // dispatch 这是个固定的形参,随便写啥，但是不能不写，可以写aa甚至bb
    return (aa) => {
        aa(setList('我是新数据'))
    }
}
// 获取 reducer
const reducer = countState.reducer
// 以按需导出的方式导出  inscrement,decrement
export { inscrement, decrement, newName,setList,YiBuFun }
// 以默认导出方式导出reducer
export default reducer

这段子模块仓库代码里面有同步方法(inscrement, decrement, newName)与异步方法(YiBuFun)，

在入口文件那引入store

js 复制代码

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

// 这里引入store文件
import store from './store/index.js'
import { Provider } from 'react-redux'

// ReactDOM.createRoot(document.getElementById('root')).render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
// )
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <Provider store={store}>
        <App />
    </Provider>
)

至此我们依旧创建好了仓库，并且仓库也和代码绑定了，接下来是使用仓库里的代码了

js 复制代码

import { useState } from 'react'
import './index.css'
import { useSelector, useDispatch } from 'react-redux'
// 这是仓库里面以按需导出的几个方法，在仓库里可以看到
import { inscrement, decrement, newName,setList,YiBuFun } from '../../store/modules/two'

function App() {
    /***
     * count  子模块里的数据名称
     * name子模块里的数据名称
     * list 子模块里的数据名称
     * 
     * counter  store/index 里的子模块的名称
     * * */
    const { count, name,list } = useSelector(state => state.XFQ)

    const dispath = useDispatch()

    return (
        <div className='div1'>
            <div onClick={() => dispath(newName('传去的值'))}>{name}</div>
            <div>
                <button onClick={() => dispath(decrement())}>减少</button>
                {count}
                <button onClick={() => dispath(inscrement())}>增加</button>
            </div>
            <div>
                <div>list的参数值：{list}</div>
                <div>
                    <div onClick={()=>dispath(setList('我是新数据'))}>异步方法修改成：我是新数据</div>
                    <div onClick={()=>dispath(setList('我是同步'))}>同步方法修改成：我是同步</div>

                </div>
            </div>
        </div>

    )
}

export default App