长沙做网站品牌网站建设劳务协议
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就是保存数据的地方，可以看成一个容器。整个应用只能有一个store，store是整个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 <div><Button 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.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>
);
Hooks
useSelector
useSelector是React Redux封装的一个Hooks，用于从Redux中的store对象中提取数据，并且返回的state对象是响应式的。
useSelector(selector,equalityFn):
- selector：是一个函数，定义如何从state中取值，如：
state => state.username - equalityFn：是一个函数，定义如何判断渲染之间的值是否以后更新，默认通过绝对值
===的方式判断，也可以自定义判断规则
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}</span><button onClick={clickButton}>更新name</button></>
}
useStore
useStore返回Redux<Provider>组件的对象引用
实际开发中为了满足组件的单一性数据原则，通常使用useSelector，但是当组件内需要引用大量数据，就需要useStore
import {useStore} from 'react-redux'
function App(){const store = useStore();const {userInfo} = store;return <><span>姓名:{userInfo.userName}</span><span>年龄:{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}</span><span>年龄:{state.userInfo.age}</span></>
}