Rudex个人总结

简介: Redux:Redux 是一个状态管理工具(类似于Vuex),因为项目的逐渐壮大,需要管理的状态也就越来越多,因此需要Redux这样的状态管理工具对我们的状态进行一个管理,方便对数据的调用,降低管理难度。

Redux

Redux 是一个状态管理工具(类似于Vuex),因为项目的逐渐壮大,需要管理的状态也就越来越多,因此需要Redux这样的状态管理工具对我们的状态进行一个管理,方便对数据的调用,降低管理难度。

通过上面这张图可以看出,在没有Redux的时候,各组件之间状态的传递是十分麻烦的,但是使用了Redux后,组件有需求的时候,只需要去store里去取,就可以了,与此同时,通过特定的方法去改变store里存储的状态的时候,其他组件从store里取的状态也会发生变化,自动改变。


Redux的工作流程以及组成部分

Redux官方给的流程图:


从图中可以看出,我们Redux由四个部分组成:

Component : React 组件,

Action : 组件的任务派发

Store : 状态仓库

Reducers : 状态创建者


文件夹的创建

index.js – store的创建

import {createStore} from 'redux' //从redux中引入 createStore 创建一个状态管理仓库
import reducer from './reducer' //引入 状态仓库创建者
const store = createStore(reducer) // 通过创建者来创建一个 store 仓库
export default store

reducer.js – 创建store的幕后黑手

import {CHANGE_CHECKED} from './actionTypes'
const defaultState = {
  data:[]
}
// reducer.js 默认抛出一个函数
export default (state = defaultState,action)=>{
  //state 就是状态 , action 是组件派发的动作
  let newState = {...state} //修改state的里的值只能通过拷贝一份state 进行修改,不可以直接修改state
  switch(action.type){
    case CHANGE_CHECKED:
      return newState 
    default:
            break;
  }
  return state
}

actionTypes.js --是对组件 dispatch 派发的 action.type 的一个存储

export const CHANGE_CHECKED = ‘changeClick’ //用大写进行保存


假设一有个 TabNav 组件

TabNav .js

import React, { Component } from 'react';
import {CHANGE_CHECKED} from './store/actionTypes.js'
import store from '../../store'
class TabNav extends Component {
    constructor(props) {
        super(props);
        this.state = { 
          data:[]
         }
        store.subscribe(this.listenState) //监听store 的 state的变化
    }
    render() { 
        return ( 
            <div>
            </div>
         );
    }
    componentDidMount(){
        store.dispatch({
            type:CHANGE_CHECKED,
            num:1
        })
    }
    listenState = ()=>{
        this.setState(store.getState()); //重新获取数据
    }
}
export default TabNav;

总结:

store.dispatch() //传入一个action 然后reducer进行接收

store.getState()//获取store的状态

store.subscribe() // 监听state的变化

目录
相关文章
|
13天前
|
供应链 监控 安全
对话|企业如何构建更完善的容器供应链安全防护体系
阿里云与企业共筑容器供应链安全
171328 12
|
16天前
|
供应链 监控 安全
对话|企业如何构建更完善的容器供应链安全防护体系
随着云计算和DevOps的兴起,容器技术和自动化在软件开发中扮演着愈发重要的角色,但也带来了新的安全挑战。阿里云针对这些挑战,组织了一场关于云上安全的深度访谈,邀请了内部专家穆寰、匡大虎和黄竹刚,深入探讨了容器安全与软件供应链安全的关系,分析了当前的安全隐患及应对策略,并介绍了阿里云提供的安全解决方案,包括容器镜像服务ACR、容器服务ACK、网格服务ASM等,旨在帮助企业构建涵盖整个软件开发生命周期的安全防护体系。通过加强基础设施安全性、技术创新以及倡导协同安全理念,阿里云致力于与客户共同建设更加安全可靠的软件供应链环境。
150295 32
|
24天前
|
弹性计算 人工智能 安全
对话 | ECS如何构筑企业上云的第一道安全防线
随着中小企业加速上云,数据泄露、网络攻击等安全威胁日益严重。阿里云推出深度访谈栏目,汇聚产品技术专家,探讨云上安全问题及应对策略。首期节目聚焦ECS安全性,提出三道防线:数据安全、网络安全和身份认证与权限管理,确保用户在云端的数据主权和业务稳定。此外,阿里云还推出了“ECS 99套餐”,以高性价比提供全面的安全保障,帮助中小企业安全上云。
201959 14
对话 | ECS如何构筑企业上云的第一道安全防线
|
6天前
|
存储 人工智能 安全
对话|无影如何助力企业构建办公安全防护体系
阿里云无影助力企业构建办公安全防护体系
1251 8
|
2天前
|
机器学习/深度学习 自然语言处理 PyTorch
深入剖析Transformer架构中的多头注意力机制
多头注意力机制(Multi-Head Attention)是Transformer模型中的核心组件,通过并行运行多个独立的注意力机制,捕捉输入序列中不同子空间的语义关联。每个“头”独立处理Query、Key和Value矩阵,经过缩放点积注意力运算后,所有头的输出被拼接并通过线性层融合,最终生成更全面的表示。多头注意力不仅增强了模型对复杂依赖关系的理解,还在自然语言处理任务如机器翻译和阅读理解中表现出色。通过多头自注意力机制,模型在同一序列内部进行多角度的注意力计算,进一步提升了表达能力和泛化性能。
|
7天前
|
人工智能 自然语言处理 程序员
通义灵码2.0全新升级,AI程序员全面开放使用
通义灵码2.0来了,成为全球首个同时上线JetBrains和VSCode的AI 程序员产品!立即下载更新最新插件使用。
1275 23
|
8天前
|
机器学习/深度学习 自然语言处理 搜索推荐
自注意力机制全解析:从原理到计算细节,一文尽览!
自注意力机制(Self-Attention)最早可追溯至20世纪70年代的神经网络研究,但直到2017年Google Brain团队提出Transformer架构后才广泛应用于深度学习。它通过计算序列内部元素间的相关性,捕捉复杂依赖关系,并支持并行化训练,显著提升了处理长文本和序列数据的能力。相比传统的RNN、LSTM和GRU,自注意力机制在自然语言处理(NLP)、计算机视觉、语音识别及推荐系统等领域展现出卓越性能。其核心步骤包括生成查询(Q)、键(K)和值(V)向量,计算缩放点积注意力得分,应用Softmax归一化,以及加权求和生成输出。自注意力机制提高了模型的表达能力,带来了更精准的服务。
|
6天前
|
消息中间件 人工智能 运维
1月更文特别场——寻找用云高手,分享云&AI实践
我们寻找你,用云高手,欢迎分享你的真知灼见!
519 22
1月更文特别场——寻找用云高手,分享云&AI实践
|
6天前
|
机器学习/深度学习 人工智能 自然语言处理
|
12天前
|
人工智能 自然语言处理 API
阿里云百炼xWaytoAGI共学课DAY1 - 必须了解的企业级AI应用开发知识点
本课程旨在介绍阿里云百炼大模型平台的核心功能和应用场景,帮助开发者和技术小白快速上手,体验AI的强大能力,并探索企业级AI应用开发的可能性。