完成公司门户网站建设,wordpress适合,乐辰科技网站建设,天津建设工程信息网专家react之基于reduxjs/toolkit使用react-redux 一、配置基础环境二、使用React Toolkit 创建 counterStore三、为React注入store四、React组件使用store中的数据五、实现效果六、提交action传递参数七、异步状态操作 一、配置基础环境 1.使用cra快速创建一个react项目 npx crea… react之基于reduxjs/toolkit使用react-redux 一、配置基础环境二、使用React Toolkit 创建 counterStore三、为React注入store四、React组件使用store中的数据五、实现效果六、提交action传递参数七、异步状态操作 一、配置基础环境 1.使用cra快速创建一个react项目 npx create-react-app react-redux2.安装reduxjs/toolkit react-redux npm i reduxjs/toolkit react-redux3.启动项目 npm start4.创建store文件 modules存储子store模块index.js组合modules中所有子模块,并导出store 整体路径 二、使用React Toolkit 创建 counterStore nodules目录下counterStore.js //从toolkit中引入 createSlice import { createSlice } from reduxjs/toolkit// 定义数据 const counterStore createSlice({name: counter,//初始化stateinitialState: {count: 0,},//修改状态的方法 同步 支持直接修改reducers: {//加addFn(state) {state.count},//减delFn(state) {state.count--},}, })//解构出来actionCreater函数 const { addFn, delFn } counterStore.actions//获取reducer const reducer counterStore.reducer//按需导出 actionCreater export { addFn, delFn }//默认导出reducer export default reducer store目录下index.js import { configureStore } from reduxjs/toolkit//引入默认导出的 import counterReducer from ./modules/counterStore//创建根store组合子模块 const store configureStore({reducer: {counter: counterReducer,}, })//导出 export default store 三、为React注入store 根目录下的index.js //引入store import store from ./store //引入provider import { Provider } from react-reduxconst root ReactDOM.createRoot(document.getElementById(root)) root.render(Provider store{store}App/App/Provider )四、React组件使用store中的数据 根目录下的App.js //从react-redux中引入useSelector useDispatch import { useSelector, useDispatch } from react-redux//导入添加 减去方法 import { addFn, delFn } from ./store/modules/counterStore function App() {//解构const { count } useSelector((state) state.counter)//得到dispatch函数const dispatch useDispatch()return (div classNameAppbutton onClick{() dispatch(delFn())}-/button{count}button onClick{() dispatch(addFn())}/buttonul/ul/div) }export default App五、实现效果 六、提交action传递参数 七、异步状态操作 1.modules目录下channelStore.js //从tookit中引入createSlice import { createSlice } from reduxjs/toolkit // 引入axios import axios from axios //定义数据 const listStore createSlice({name: list,//初始化initialState: {list: [],},//修改同步方法reducers: {setList(state, action) {state.list action.payload},}, })//解构出来reducers const { setList } listStore.actions //异步请求方法 const getList () {return async (dispatch) {const res await axios.get(接口地址)dispatch(setList(res.data.data.channels))} }//获取reducer const reducer listStore.reducer//导出异步方法 export { getList }//默认导出reducer export default reducer 2.store目录下index.js import { configureStore } from reduxjs/toolkit//引入默认导出的 import counterReducer from ./modules/counterStore import listReducer from ./modules/channelStore //创建根store组合子模块 const store configureStore({reducer: {counter: counterReducer,list: listReducer,}, })//导出 export default store3.页面中使用 //从react-redux中引入useSelector useDispatch import { useSelector, useDispatch } from react-redux import { useEffect } from react //导入获取列表异步方法 import { getList } from ./store/modules/channelStorefunction App() {const dispatch useDispatch()useEffect(() {dispatch(getList())}, [dispatch])//解构const { list } useSelector((state) state.list)//得到dispatch函数return (div classNameAppul{list.map((item) (li key{item.id}{item.name}/li))}/ul/div) }export default App