网站建设 计入哪个科目网页设计网站制作视频教程

当前位置： 首页 > news >正文

网站建设 计入哪个科目,网页设计网站制作视频教程,wordpress修改工具,京东做代码的网站吗redux Redux 是 JavaScript 应用中管理应用状态的工具#xff0c;特别适用于复杂的、需要共享状态的中大型应用。Redux 的核心思想是将应用的所有状态存储在一个单一的、不可变的状态树#xff08;state tree#xff09;中#xff0c;状态只能通过触发特定的 action 来更新…redux Redux 是 JavaScript 应用中管理应用状态的工具特别适用于复杂的、需要共享状态的中大型应用。Redux 的核心思想是将应用的所有状态存储在一个单一的、不可变的状态树state tree中状态只能通过触发特定的 action 来更新。 官方文档 https://cn.redux.js.org/tutorials/typescript-quick-start 如果对react 不了解 可以看我其他文章 React 核心语法

1. 核心概念 在开始之前先了解几个 Redux 的核心概念 Store存储应用的全局状态应用中只能有一个 store。Action描述发生了什么事情通常是一个包含 type 和 payload 的对象。 修改的函数Reducer纯函数接收当前的 state 和 action返回一个新的 state。主要定义全局修改的函数Dispatch发送 action 到 reducer 以触发状态的变化。(和vuex差不多)Middleware拦截 action可以用于异步操作如 redux-thunk或日志记录。
2. 安装 Redux 和相关工具 你可以使用 npm 或 yarn 来安装 Redux 和 react-reduxReact 的绑定库以及 Redux DevTools 用于调试 npm install redux react-redux reduxjs/toolkit或者 yarn add redux react-redux reduxjs/toolkitreduxjs/toolkit 是 Redux 官方推荐的简化工具包用于减少 Redux 样板代码并提供了一些优化的功能。 3. Redux 使用示例 3.1 定义一个 Redux Store Redux Store 是整个应用状态的存储中心。我们可以使用 configureStore 来创建 Redux store。 也就是pinia 模块化中的index index.ts import { configureStore } from reduxjs/toolkit;const store configureStore({//进行模块导入reducer: {// 你的 reducers} });export default store;3.2 创建 Slice使用 Redux Toolkit createSlice 是 Redux Toolkit 中的一个 API能够简化 action 和 reducer 的编写。 在counter 目录下新建 counterStore.ts 或者tsx都可以 import { createSlice } from reduxjs/toolkit;// 定义一个 counter 的 slice const counterStore createSlice({name: counter, // slice 的进行多环境时候隔离的名称initialState: { count: 0 }, // 初始状态reducers: {// 定义 reducer 方法increment: (state) {state.count 1; // 直接修改 state},decrement: (state) {state.count - 1;},reset: (state) {state.count 0;}} });// 导出 actions 交给具体组件使用 export const { increment, decrement, reset } counterStore.actions;// 导出 reducer供 store index.ts 注册 使用 export default counterStore.reducer;3.3 将 Slice 合并到 Store 将 counterSlice.reducer 添加到 Redux store 中。 index.ts 此时完成注册 返回注册的配置的store对象 import { configureStore } from reduxjs/toolkit; import counterReducer from ./counterSlice;const store configureStore({reducer: {counter: counterReducer, // 将 counterReducer 添加到 store 中} });export default store;3.4 在 React 中使用 Redux 现在你可以使用 react-redux 提供的 Provider 组件将 store 注入到 React 组件中。 挂载react 组件数 ,让store范围内的组件 都可以使用 (感觉就像hook中的useContext pro max 版本) main.tsx /*** StrictMode 是 React 提供的一个开发工具用于帮助检测应用程序中的潜在问题。它主要用于在开发模式下运行时对组件进行额外的检查和警告。StrictMode 不会在生产环境中影响应用程序的性能。** StrictMode 的主要功能包括* 识别不安全的生命周期方法在 React 16.3 之后一些生命周期方法被标记为不安全StrictMode 可以帮助你识别这些方法的使用。* 检测过时的字符串 ref APIStrictMode 会警告你使用过时的字符串 ref API建议使用函数或 createRef API。* 检测意外的副作用StrictMode 会帮助你检测组件中可能存在的副作用例如在渲染过程中修改状态或执行其他副作用操作。* 检测遗留的 context APIStrictMode 会警告你使用过时的 context API建议使用新的 context API。*///3.添加到组件树 createRoot(document.getElementById(root)!).render(StrictModeProvider store{store}App //Provider/StrictMode,) 3.5 在组件中访问 Redux 状态 为了在 React 组件中访问 Redux 状态我们可以使用 useSelector 和 useDispatch 钩子。 useSelector: 从 Redux store 中获取选择哪个模块的状态。useDispatch: 用于 dispatch 一个 action触发状态更新。 新建一个demo 演示组件 import { useSelector, useDispatch } from react-redux; // 导出需要使用的函数 import { increment, decrement, reset } from ../../store/counter/conterStoreUSER.tsx;function Counter() {// 使用 useSelector 选择需要的全局存储模块 获取模块当前状态 const count useSelector((state) state.counter.count);// 使用 useDispatch 获取 dispatch 函数 用于传递执行的actionconst dispatch useDispatch();return (divh1全局技术器Counter: {count}/h1button onClick{() dispatch(increment())}Increment/buttonbutton onClick{() dispatch(decrement())}Decrement/buttonbutton onClick{() dispatch(reset())}Reset/buttonSon/Son/div); } //演示深层 组件也可以获取到全局状态 function Son() {const count useSelector((state) state.counter.count);return (divh1层级别省的也可以拿到数据Counter: {count}/h1/div); }export default Counter;main.tsx import { StrictMode } from react import { createRoot } from react-dom/client // import App from ./AppUSER.tsx import Counter from ./page/test/demo1USER.tsx import ./index.css import store from ./store; import {Provider} from react-redux;createRoot(document.getElementById(root)!).render(StrictModeProvider store{store}{/App //}Counter //Provider/StrictMode,) 演示成功,此时就已经可以成功使用redux 全局状态管理的功能了,还是相当简单的 目录结构
   效果 3.6 使用 Redux DevTools 调试 Redux DevTools 是调试 Redux 状态变化的强大工具默认情况下与 Redux Toolkit 兼容。 打开浏览器的 Redux DevTools 即可查看 Redux 状态的变化。
3. 优缺点 优点 全局状态管理适用于复杂的大型应用。状态不可变调试方便状态变化容易追踪。Redux DevTools 支持时间旅行等调试功能。 缺点 开发小型应用时可能过于复杂增加不必要的样板代码。 需要理解 actions、reducers 等概念有一定的学习曲线。
   5.其他功能 核心功能就上面 kiit 工具包用后很简单 其他功能可以看官方文档 https://cn.redux.js.org/introduction/why-rtk-is-redux-today