免费自助建站全系统,工业设计公司有哪些,学做电商网站设计,wordpress 多语言主题redux是什么
Redux是一个模式和库#xff0c;用于管理和更新应用程序状态#xff0c;使用称为“action”的事件。它是需要在整个应用程序中使用的状态的集中存储#xff0c;规则确保状态只能以可预测的方式更新。
Redux主要有三个功能#xff1a;
获取当前状态更新状态监…redux是什么
Redux是一个模式和库用于管理和更新应用程序状态使用称为“action”的事件。它是需要在整个应用程序中使用的状态的集中存储规则确保状态只能以可预测的方式更新。
Redux主要有三个功能
获取当前状态更新状态监听状态变化
什么情况下使用redux
某个组件的状态需要让其他组件可以随时拿到一个组件需要改变另一个组件的状态在应用的大量地方存在大量的状态能不用就不用如果不用比较吃力才考虑使用
使用redux的原则
单一数据源的所有应用的状态被统一管理在唯一的store对象数据中状态是只读的状态的变化只能通过触发action改变使用纯函数来执行修改使用纯函数来描述action这里的纯函数被称为reducer
redux工作流程
redux的核心概念
action
action就是视图发出的通知用来说明状态应该发生什么变化。
action是一个普通的JavaScript对象它有一个type字段。您可以将操作视为描述应用程序中发生的事情的事件.
一个action对象可以有其他字段其中包含有关所发生事件的附加信息。按照惯例我们将这些信息放在一个名为payload的字段中。
包含两个属性
type要操作的类型payload可选参数需要操作的数据
异步action
异步action是一个函数。
store
store就是保存数据的地方可以看成一个容器。整个应用只能有一个storestore是整个Redux的统一操作入口。store是调度者用于联系action和reducer。
import {configureStore} from reduxjs/toolkit
import counterReducer from ./counter.js
export default configureStore({reducer:{counter:counterReducer}
})reducer
store收到action之后必须给出一个新的状态这样视图才会发生变化这种状态的计算过程就是Reducer。
reducer是一个纯函数接收旧的state和action返回一个新的state。用于初始化状态和更新状态。
import {createSlice} from reduxjs/toolkit
const counterSlice createSlice({name:counter,initialState:{count:0},reducers:{increament:(state,action){state.count action.payload;}}
})
export const {increament} counterSlice.actions
export default counterSlice.reducer使用
// 组件内部
import {useDispatch,useSelector} from react-redux
import {increament} from ../../../store/counter
function Home {let count useSelector(state state.counter.count)let dispatch useDispath();add () {dispatch(increament(1));}return divButton onClick{add}加1/Button/div
}// index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import reportWebVitals from ./reportWebVitals;
import { BrowserRouter} from react-router-dom;
import { Provider } from react-redux;
import store from ./store
const root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeProvider store{store}App //Provider/React.StrictMode
);Hooks
useSelector
useSelector是React Redux封装的一个Hooks用于从Redux中的store对象中提取数据并且返回的state对象是响应式的。
useSelector(selector,equalityFn):
selector是一个函数定义如何从state中取值如state state.usernameequalityFn是一个函数定义如何判断渲染之间的值是否以后更新默认通过绝对值的方式判断也可以自定义判断规则
import {useSelector} from react-redux
function App(){const userName useSelector(state state.userName);return span用户姓名{userName}/span/
}useDispatch
useDispatch返回redux store的dispatch函数引用。
import {useDispatch} from react-redux
function App(){const dispatch useDispatch();const clickButton(){dispatch({type:username,data:hello});}return span姓名{username}/spanbutton onClick{clickButton}更新name/button/
}useStore
useStore返回ReduxProvider组件的对象引用
实际开发中为了满足组件的单一性数据原则通常使用useSelector但是当组件内需要引用大量数据就需要useStore
import {useStore} from react-redux
function App(){const store useStore();const {userInfo} store;return span姓名:{userInfo.userName}/spanspan年龄:{userInfo.age}/span/
}useReduxContext
useReduxContext就是一个完全的React.useContext实例对象返回全局实例对象的上下文然后通过这个上下文直接获取state、dispatch。
import {useReduxContext}from react-redux
function App(){const context useReduxContext();const{state,dispatch} context;return span姓名:{state.userInfo.userName}/spanspan年龄:{state.userInfo.age}/span/
}
