pc wap 装修公司网站源码,ps做网站心得,小程序介绍内容怎么写,商城网站建设哪个公司好1. Redux基础用法
Redux 是一个用于 JavaScript 应用的状态管理库#xff0c;它不依赖于任何 UI库#xff0c;但常用于与 React 框架配合使用。它提供了一种集中式的状态管理方式#xff0c;将应用的所有状态保存在一个单一的全局 Store#xff08;存储#xff09;中它不依赖于任何 UI库但常用于与 React 框架配合使用。它提供了一种集中式的状态管理方式将应用的所有状态保存在一个单一的全局 Store存储中使得状态的变化和共享变得更加可控和可预测。
✨Redux 的核心概念 Store Redux 的 Store 是一个对象存储了应用的全部状态。应用中只有一个 Store作为单一数据源。任何组件需要访问状态时都会从这个 Store 中获取数据。 Action Action 是一个简单的 JavaScript 对象用**来描述要执行的状态变化。**它通常包含两个部分type字符串描述 Action 的类型和 payload可选用来传递需要修改的数据信息。Action 是 Redux 中唯一触发状态更新的方式。 Reducer Reducer 是一个纯函数定义了应用在接收到不同 Action 时如何更新状态。它接收当前的状态和 Action返回一个新的状态对象。 Dispatch Dispatch 是 Redux 中触发 Action 的方法。调用 store.dispatch(action) 可以将 Action 发送到 Store从而触发 Reducer 更新状态。 Selectors Selectors 是从 Store 中获取特定状态的函数主要用于简化和集中获取逻辑避免直接访问 Store 造成的代码冗余。 Middleware Redux 中间件是在 dispatch 和 reducer 之间的一个逻辑层可以用于处理异步操作如 redux-thunk或记录状态变化如 redux-logger。中间件增强了 Redux使其能够处理复杂的逻辑和副作用。
简单计数器案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
script srchttps://cdn.bootcdn.net/ajax/libs/redux/4.2.0/redux.min.js/scriptbodybutton idincrement/buttonspan idcount0/spanbutton iddecrement-/button
/bodyscript// 1.定义reducer函数// 作用:根据不同的action对象返回不同的新的state// state:管理的数据初始状态// action:对象 type 标记当前想要做什么样的修改function reducer(state { count: 0 }, action) {// 数据不可变:基于原始状态生成一个新的状态if (action.type INCREMENT) {return { count: state.count 1 }}if (action.type DECREMENT) {return { count: state.count - 1 }}return state}// 2. 使用reducer函数创建store对象const store Redux.createStore(reducer)// 3. 通过store对象的dispatch修改store中的数据const inBtn document.getElementById(increment)const deBtn document.getElementById(decrement)inBtn.addEventListener(click, () {store.dispatch({ type: INCREMENT })})deBtn.addEventListener(click, () {store.dispatch({ type: DECREMENT })})// 4. 监听store中数据的变化//每次state发生变化的时候自动执行store.subscribe(() {console.log(store数据变化了, store.getState())document.getElementById(count).innerText store.getState().count})
/script
/html2. React中使用Redux
在React中使用redux官方要求安装俩个其他插件-ReduxToolkit和react-redux
Redux Toolkit(RTK) 官方推荐编写Redux逻辑的方式是一套工具的集合简化书写方式react-redux用来 链接 Redux和 React组件的中间件
npm install reduxjs/toolkit react-redux目录结构新建store文件夹将子模块放在modules目录下index.js为store入口文件。
创建 slice 需要一个字符串名称来标识 slice一个初始 state 值以及一个或多个 reducer 函数来定义如何更新 state。创建 slice 后我们可以导出生成的 Redux action creators 和整个 slice 的 reducer 函数。
/store/modules/counterStore.js
import {createSlice} from reduxjs/toolkitconst counterSlice createSlice({// 标识 slice的字符串名称name:counter,// 初始化stateinitialState:{count:0},// 修改state的方法同步方法reducers:{increment(state,action){// 修改时的传参会放在ction.payload属性上state.count action.payload},decrement(state,action){state.count - action.payload}}
})// 从 counterSlice.actions中解构
export const {increment,decrement} counterSlice.actions
export default counterSlice.reducer接下来我们需要从 counter slice 中导入 reducer 函数并将其添加到我们的 store 中。通过在 reducer 参数中定义一个字段我们告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新。
/store/index.js
import { configureStore } from reduxjs/toolkit;// 导入子模块reducer
import counterReducer from ./modules/counterStore;
// 通过configureStore来创建一个store
const store configureStore({reducer: {counter: counterReducer,},
});
export default store提供store 导入我们刚刚创建的 Redux store在你的 App 周围放一个 Provider然后将 store 作为 prop 传递
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import reportWebVitals from ./reportWebVitals;
import { Provider } from react-redux;
import store from ./store;// 将App组件渲染到id为root的DOM元素中
const root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeProvider store{store}App //Provider/React.StrictMode
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();读取store中的数据 使用useSelector函数
修改store中的数据 使用useDispatch函数并根据需要 dispatch action
import { useDispatch, useSelector } from react-redux;
import { increment, decrement } from ./store/modules/counterStore;
function App() {const { count } useSelector((state) state.counter);const dispatch useDispatch();return (divbutton onClick{() dispatch(decrement(1))}-/button{count}button onClick{() dispatch(increment(1))}/button/div);
}export default App;异步请求操作
创建store的写法保持不变配置好同步修改状态的方法单独封装一个函数在函数内部return一个新函数在新函数中 2.1 封装异步请求获取数据 2.2 调用同步actionCreater传入异步数据生成一个action对象并使用dispatch提交
/store/modules/sentenceStore.js
import { createSlice } from reduxjs/toolkit;
// 先安装npm i axios
import axios from axios;const sentenceSlice createSlice({name: sentence,initialState: {sentence: {},},reducers: {setSentence(state, action) {state.sentence action.payload;},},
});
const { setSentence } sentenceSlice.actions;
// 获取异步请求数据
const getSentence () {return async (dispatch) {const { data } await axios.get(https://api.xygeng.cn/one);dispatch(setSentence(data.data));};
};
export { getSentence };
export default sentenceSlice.reducer;/store/index.js
import { configureStore } from reduxjs/toolkit;// 导入子模块reducer
import counterReducer from ./modules/counterStore;
import sentenceReducer from ./modules/sentenceStore;const store configureStore({reducer: {counter: counterReducer,sentence: sentenceReducer,},
});
export default store;3.组件中dispatch的写法保持不变
import { useDispatch, useSelector } from react-redux;
import { increment, decrement } from ./store/modules/counterStore;
import { getSentence } from ./store/modules/sentenceStore;
import { useEffect } from react;
function App() {const { count } useSelector((state) state.counter);const { sentence } useSelector((state) state.sentence);// 通过dispatch触发action来更新state状态const dispatch useDispatch();// 使用useEffect触发异步请求useEffect(() {dispatch(getSentence());}, [dispatch]);return (divbutton onClick{() dispatch(decrement(1))}-/button{count}button onClick{() dispatch(increment(1))}/buttondiv{ }{sentence.content}--{sentence.name}/div/div);
}export default App;Redux 官网教程
3. Redux调试工具
google商城里搜索
