做网站和优化的公司,深圳市勘察设计,广东深圳有几个区,网站定制开发内容1. 环境搭建
插件安装#xff1a;Redux Toolkit和react-redux
npm i reduxjs/toolkit react-redux2、
store目录结构设计
集中状态管理的部分会单独创建一个store目录#xff08;在src下#xff09;应用通常会有很多个子模块#xff0c;所以还会有个modules目录#x…1. 环境搭建
插件安装Redux Toolkit和react-redux
npm i reduxjs/toolkit react-redux2、
store目录结构设计
集中状态管理的部分会单独创建一个store目录在src下应用通常会有很多个子模块所以还会有个modules目录在内部编写业务分类的子storestore中的入口文件index.js的作用是组合modules中的所有子模块并导出store
3、使用React Toolkit创建counterStore
创建各模块的store counterStore.js
import { createSlice } from reduxjs/toolkit;// 创建store
const counterStore createSlice({name: counter,// 初始化stateinitialState: {count: 0},// 修改状态的方法 reducers: {inscrement(state) {state.count;},decrement(state) {state.count--;}}
})// 结构出actionCreater函数
const {inscrement, decrement} counterStore.actions
// 获取reducer
const reducer counterStore.reducer// 以按需导出的方式导出actionCreater
export {inscrement, decrement}
// 以默认导出的方式导出reducer
export default reducer在index,js中组合store
import { configureStore } from reduxjs/toolkit;
// 导入子模块reducer
import counterReducer from ./modules/counterStoreconst store configureStore({reducer: {counter: counterReducer}
})export default store4、为React注入store
React-redux负责把Redux和redux连接起来内置Provider组件通过store参数把创建好的store实例注入到应用中。
import React from react;
import ReactDOM from react-dom/client;
import ./index.css;
import App from ./App;
import reportWebVitals from ./reportWebVitals;
import store from ./store;
import { Provider } from react-redux;const root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeProvider store{store}App //Provider/React.StrictMode
);reportWebVitals();5、在React组件中使用store中的数据
使用useSelector钩子函数把store中的数据映射到组件中 import React from react;
import ./App.css;import { useSelector } from react-redux;function App() {// 这里state.counter和store中的reducer.counter是对应的const {count} useSelector(state state.counter);return (React.Fragmentdiv{count}/div/React.Fragment);
}export default App;
6、React组件中修改store中的数据
引入useDispatch钩子函数作用生成提交的action对象的dispatch函数 import React from react;
import ./App.css;import { useDispatch, useSelector } from react-redux;// 倒入actionCreater
import {inscrement, decrement} from ./store/modules/counterStorefunction App() {// 这里state.counter和store中的reducer.counter是对应的const {count} useSelector(state state.counter);const dispatch useDispatch()return (React.Fragmentdiv{/* 调用dispatch提交action对象 */}button onClick{() dispatch(decrement())} - /buttonspan{count}/spanbutton onClick{() dispatch(inscrement())} /button/div/React.Fragment);
}export default App;7、在action中传参
在reducers的同步修改方法中添加action对象参数在调用actionCreator时传递参数参数会被传递到action对象的payload属性上 定义方法通过payload获取传入的参数
import { createSlice } from reduxjs/toolkit;// 创建store
const counterStore createSlice({name: counter,// 初始化stateinitialState: {count: 0},// 修改状态的方法 reducers: {inscrement(state) {state.count;},decrement(state) {state.count--;},addToNum (state, action) {// payload是固定属性state.count action.payload}}
})// 解构出actionCreater函数
const {inscrement, decrement, addToNum} counterStore.actions
// 获取reducer
const reducer counterStore.reducer// 以按需导出的方式导出actionCreater
export {inscrement, decrement, addToNum}
// 以默认导出的方式导出reducer
export default reducer使用 button onClick{() dispatch(addToNum(10))} add To 10/buttonbutton onClick{() dispatch(addToNum(20))} add To 20/button8、异步代码
store写法不变单独封装一个函数返回一个新函数在新函数中封装异步请求获取数据并调用同步actionCreater传入异步数据生成一个action对象并使用dispatch提交 channelStore.js
import { createSlice } from reduxjs/toolkit;
import axios from axios;const channelStore createSlice({name: channel,initialState: {channelList: []},reducers: {setChannels(state, action) {state.channelList action.payload}}
})// 异步请求部分
const {setChannels} channelStore.actionsconst fetchChannelList () {return async (dispatch) {const res await axios.get(http://geek.itheima.net/v1_0/channels)dispatch(setChannels(res.data.data.channels))}
}const reducer channelStore.reducer
export {fetchChannelList}
export default reducer
组件中dispatch的写法保持不变 store/index.js不变
import { configureStore } from reduxjs/toolkit;
// 导入子模块reducer
import counterReducer from ./modules/counterStore
import channelReducer from ./modules/channelStoreconst store configureStore({reducer: {counter: counterReducer,channel: channelReducer}
}) export default store在组件中使用
import React, { useEffect } from react;
import { useDispatch, useSelector } from react-redux;// 倒入actionCreater
import { fetchChannelList } from ./store/modules/channelStore;function App() {const {channelList} useSelector(state state.channel)const dispatch useDispatch()useEffect(() {dispatch(fetchChannelList())}, [])return (React.Fragmentdiv{/* 调用dispatch提交action对象 */}ul{channelList.map(item li key{item.id}{item.name}/li)}/ul/div/React.Fragment);
}export default App;
