React Redux

redux是什么

Redux是一个模式和库,用于管理和更新应用程序状态,使用称为"action"的事件。它是需要在整个应用程序中使用的状态的集中存储,规则确保状态只能以可预测的方式更新。

Redux主要有三个功能:

  • 获取当前状态
  • 更新状态
  • 监听状态变化

什么情况下使用redux

  1. 某个组件的状态需要让其他组件可以随时拿到
  2. 一个组件需要改变另一个组件的状态
  3. 在应用的大量地方存在大量的状态
  4. 能不用就不用,如果不用比较吃力才考虑使用

使用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。

jsx 复制代码
import {configureStore} from 'reduxjs/toolkit'
import counterReducer from './counter.js'
export default configureStore({
    reducer:{
        counter:counterReducer
    }
})
reducer

store收到action之后,必须给出一个新的状态,这样视图才会发生变化,这种状态的计算过程就是Reducer。

reducer是一个纯函数,接收旧的state和action,返回一个新的state。用于初始化状态和更新状态。

jsx 复制代码
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

使用

jsx 复制代码
// 组件内部
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>
}
jsx 复制代码
// 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:是一个函数,定义如何判断渲染之间的值是否以后更新,默认通过绝对值===的方式判断,也可以自定义判断规则
jsx 复制代码
import {useSelector} from 'react-redux'
function App(){
    const userName = useSelector(state => state.userName);
    return <>
    	<span>用户姓名{userName}</span>
    </>
}

useDispatch

useDispatch返回redux store的dispatch函数引用。

jsx 复制代码
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

jsx 复制代码
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。

jsx 复制代码
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>
    </>
}
相关推荐
亮子AI7 小时前
【npm】npm install 产生软件包冲突怎么办?(详细步骤)
前端·npm·node.js
汪汪大队u8 小时前
为什么 filter-policy 仅对 ASBR 的出方向生效,且即使在该生效场景下,被过滤的路由在协议内部(如协议数据库)依然存在,没有被彻底移除?
服务器·前端·网络
慧一居士8 小时前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
颜酱8 小时前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法
木易 士心8 小时前
Nginx 基本使用和高级用法详解
运维·javascript·nginx
蒙特卡洛的随机游走8 小时前
Spark的宽依赖与窄依赖
大数据·前端·spark
共享家95278 小时前
QT-常用控件(多元素控件)
开发语言·前端·qt
幸运小圣8 小时前
Iterator迭代器 【ES6】
开发语言·javascript·es6
葱头的故事8 小时前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript
中微子8 小时前
🚀 2025前端面试必考:手把手教你搞定自定义右键菜单,告别复制失败的尴尬
javascript·面试