npm i @reduxjs/toolkit react-redux
创建一个 store文件夹,里面创建index.js文件和子模块文件夹
index,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文件子模块里创建模块文件,文件里写入以下代码
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
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>
)
至此我们依旧创建好了仓库,并且仓库也和代码绑定了,接下来是使用仓库里的代码了
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