安庆做网站电话,wordpress编辑父主题,搜狐网站建设设计,网站组建 需求分析Redux在React中的使用
1.构建方式
采用reduxjs/toolkitreact-redux的方式 安装方式
npm install reduxjs/toolkit react-redux2.使用
①创建目录 创建store文件夹#xff0c;然后创建index和对应的模块#xff0c;如上图所示
②编写counterStore.js
文章以counterStore…Redux在React中的使用
1.构建方式
采用reduxjs/toolkitreact-redux的方式 安装方式
npm install reduxjs/toolkit react-redux2.使用
①创建目录 创建store文件夹然后创建index和对应的模块如上图所示
②编写counterStore.js
文章以counterStore命名名字可自行取
import {createSlice} from reduxjs/toolkit
const counterStorecreateSlice({name:counter,//初始化状态数据initialState:{count:0},reducers:{increment(state){state.count},decrement(state){state.count--}}
})
//解构出创建action对象的函数
const {increment,decrement}counterStore.actions
//获取reducer函数
const counterReducercounterStore.reducer
export {increment,decrement}
export default counterReducer③编写index.js
import {configureStore} from reduxjs/toolkit
import counterReducer from ./modules/counterStore;//创建根store组合子模块
const storeconfigureStore({reducer:{counter:counterReducer}
})
export default store④在根组件中导入 使用react-redux中Provider进行导入
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import store from ./store;
import {Provider} from react-redux;const root ReactDOM.createRoot(document.getElementById(root));
root.render(Provider store{store}App //Provider
);⑤在组件中使用 使用useSelector获取store中的数据
const ComponentDemo(){const {count}useSelector(state state.counter)return(div{count}/div)
}export default ComponentDemo使用useDispatch获取dispatch方法提交对应的方法改变state的值
const GrandSon(){const dispatchuseDispatch()return(div onClick{(){dispatch(decrement())}}我是孙子组件/div)
}
