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

本文主要是介绍react使用npm i @reduxjs/toolkit react-redux，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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',// 初始化stateinitialState: {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甚至bbreturn (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