做外贸需要到外汇管理网站,wordpress标签生成,关键词查询的分析网站,关键词优化策略在使用之前要先了解它的配套插件#xff1a;
在React中使用redux#xff0c;官方要求安装其他插件 Redux Toolkit 和 react-redux Redux Toolkit#xff1a;它是一个官方推荐的工具集#xff0c;旨在简化 Redux 的使用和管理。Redux Toolkit 提供了一些提高开发效率的工具…在使用之前要先了解它的配套插件
在React中使用redux官方要求安装其他插件 Redux Toolkit 和 react-redux Redux Toolkit它是一个官方推荐的工具集旨在简化 Redux 的使用和管理。Redux Toolkit 提供了一些提高开发效率的工具和功能如 createSlice 和 configureStore使得编写和组织 Redux 代码更加简单。使用 Redux Toolkit您可以更快地编写 Redux 代码同时还能获得一些性能优化和开发便利。 安装 Redux Toolkit npm install reduxjs/toolkit react-redux它是 Redux 官方提供的与 React 集成的库。它提供了 Provider 组件来将 Redux store 注入到整个 React 应用中以及 useDispatch 和 useSelector 这些方便的钩子函数用于在 React 组件中使用 Redux 的 dispatch 和选择器功能。 安装 react-redux npm install react-redux 安装这两个插件后您就可以在 React 应用中使用 Redux 并使用 Redux Toolkit 进行更简洁、高效的编码同时通过 react-redux 方便地与 React 进行集成。
创建一个新的react 文件且安装了两个插件后调整目录结构 开始使用
第一步初始化 state定义修改状态的方法解构出来 actionCreater函数获取 reducer reducer 用于定义如何更新应用的状态。它接收两个参数当前的状态state和即将执行的 action并返回一个新的状态。 counterStore.js
import { createSlice } from reduxjs/toolkit;const counterStore createSlice({name: counter,// 初始化 stateinitialState: {count: 0,},// 修改状态的方法 同步方法可以直接修改值reducers: {addCount(state) {state.count;},decreaseCount(state) {state.count--;},},
});// 解构出来 actionCreater函数
const { addCount, decreaseCount } counterStore.actions;
// 获取 reducer
const reducer counterStore.reducer;
// 按需导出
export { addCount, decreaseCount };
// 默认导出
export default reducer;第二步在出口文件中导出 redux
src\store\index.js
// 出口文件
import { configureStore } from reduxjs/toolkit;
// 导入子模块
import counterStore from ./modules/counterStore;const store configureStore({reducer: {counter: counterStore,},
});// 导出
export default store;
第三步配置redux 中的数据全局可用
src\index.js
import React from react;
import ReactDOM from react-dom/client;
import ./index.css;
import App from ./App;
import reportWebVitals from ./reportWebVitals;
// Redux
import store from ./store;
import { Provider } from react-redux;const root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictMode{/* 全局可用 */}Provider store{store}App //Provider/React.StrictMode
);reportWebVitals();
第四步使用 useDispatch它简化了在函数组件中使用 dispatch 函数的过程无需手动从 store 中获取 dispatch 函数。 useSelector它允许组件从 Redux store 中选择select所需的状态。通过它可以订阅 Redux store 的状态以便在组件中获取所需的数据。 App.js
import ./App.css;
import { useDispatch, useSelector } from react-redux;
// 获取
import { addCount, decreaseCount } from ./store/modules/counterStore;function App() {// 得到 Redux 中的数据const { count } useSelector((state) state.counter);// 处理数据的函数const dispatch useDispatch();return (div classNameAppbutton onClick{() dispatch(addCount())}/buttonp{count}/pbutton onClick{() dispatch(decreaseCount())}-/button/div);
}export default App;
