11-06-react redux

最新推荐文章于 2022-10-24 18:09:51 发布
最新推荐文章于 2022-10-24 18:09:51 发布
阅读量94 收藏
点赞数
分类专栏： 11-react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ange997/article/details/109446834
版权

redux重点

store 仓库

核心是store，store中放state

let store = Redux.createStore(
    reducer,
    composeEnhancers()   // 启动redux调试
);

创建store时，只能指定一个reducer
项目中如果有多个reducer，可以合并成一个reducer。

import { combineReducers } from "redux"
import counter from "./counter";
// combineReducers就是用来合并reducer
let reducer = combineReducers({
    counter
    // ......
})
export default reducer;

引入reducers文件夹，合并文件夹里的多个reducer，默认调用index文件夹
import reducer from "./reducers";

state 状态数据

state是只读的，你只能获取状态，不能直接去修改状态。

let initState = {
    number:0
}

action 活动动作

action表示要执行的一个动作，本质就是一个JS对象，这个对象必须有一个属性，叫type，
type是用来描述修改的动作。

let increment = {
    type:"INCREMENT"
}

action creators 活动创造者
action creators是一个函数, 返回一个action， 此函数的作用是用来创建action。
这样创建的action就可以传参了。

function increment(step) {
    return{ type:"INCREMNT",step:step }
}

reducer

reducer是一个函数，根据不同的action，完成state的修改，也就说，想修改状态，要准备action和reducer。

 // state=initState 告诉reducer初始化的状态是initState
 function reducer(state=initState,action){
     switch (action.type) {
         case "INCREMENT":
             return { number:state.number+1}
         case "DECREMENT":
             return { number:state.number-1}
         default:
             return state; // 如果action不能识别，还是返回老的状态
     }
 }

相当于一个管理员，传给它初识状态state和动作action，会根据条件返回新的状态，形式是一样的。

dispatch 发布

用于派发一个action

			  //action活动
store.dispatch(increment);

getState

console.log("最新的状态:",store.getState());

获取状态（只能是从仓库中获取状态）

subscribe 订阅

一旦订阅了 当仓库中的状态发生了改变，就会执行回调函数，你可以在回调函数里面做一些事情。

store.subscribe(()=>{ // 回调函数   当仓库中的状态发生改变就会执行回调函数
    // 获取最新的状态
    console.log("最新的状态是：", store.getState());
})

redux

react

问：react是什么？
    答：用于构建用户界面的JS框架。

问：react本身有状态管理吗？
	答：有  react本身就有状态管理

问：不使用redux，可以进行项目开发吗？
	答：可以

问：vue和react本身就有状态管理，为什么会有redux和vuex？
	答：状态集中管理
既然我们要把状态交给redux进行管理，是不是就意味着，react组件中就没有状态了？
	答：对的
问：如何让视图（界面）更新？
	答：调用render();

学习react，就是学习react技术栈：
react.js + react-router-dom + axios + webpack + es6 + ui + redux

redux类似于vuex，对状态统一进行管理，如果项目非常小，不需要使用redux。

redux介绍：

  1. 进行react中组件的状态管理，状态共享。
  2. 追综到状态的变化
  3. redux并不是只能要react中使用，可以配合很多的JS框架，是一个独立的状态管理器。 vuex只能在vue中使用。
  4. redux和vuex一样，核心是store
  5. 发布订阅

基本概念：

  1. 核心是store，store中放state。单一数据源，状态只能来来自于store。
  2. state是只读的，你只能获取状态，不能直接去修改状态。

store / state / reducer / action
订阅subscribe / 发布dispatch / getState

redux流程

学习redux，把握到仓库的，需要考虑两个东西：

  1. 如何创建store ( store / state / reducer / action)
  2. 如何使用store (3个api)

创建仓库：

<script src="../js/redux.js"></script>  页面中就有了Redux这个对象。
在Redux这个对象上，有一个api，叫createStore，它就可以创建一个仓库。

需要给仓库分配一个叫reducer的管理员
let store = Redux.createStore(reducer)

action:

 action表示要执行的一个动作，本质就是一个JS对象，
 这个对象必须有一个属性，叫type，
 type是用来描述修改的动作

准备reducer:

   reducer是一个函数，根据不同的action，完成state的修改
    也就说，你想修改状态，你要准备action和reducer。

reducer接收一个之前的状态和action，返回一个新的状态。

function reducer(state=initState,action){
    switch (action.type) {
        case "INCREMENT":
            return { number:state.number+1}
        case "DECREMENT":
            return { number:state.number-1}
        default:
            return state; // 如果action不能识别，还是返回老的状态
    }
}

使用store中的API

  • dispatch: 用于派发一个action
  • getState: 获取状态（只能是从仓库中获取状态）
  • subscribe: 订阅 一旦订阅了 当仓库中的状态发生了改变，就会执行回调函数，你可以在回调函数里面做一些事情。

初识redux代码解析

// 准备一个最开始的状态
    let initState = {
        number:0
    }

    // 准备action
    let increment = {
        type:"INCREMENT"
    }
    let decrement = {
        type:"DECREMENT"
    }

    // state=initState 告诉reducer初始化的状态是initState
    function reducer(state=initState,action){
        switch (action.type) {
            case "INCREMENT":
                return { number:state.number+1}
            case "DECREMENT":
                return { number:state.number-1}
            default:
                return state; // 如果action不能识别，还是返回老的状态
        }
    }

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    let store = Redux.createStore(
        reducer,
        composeEnhancers()   // 启动redux调试
    );

    // 先订阅
    store.subscribe(()=>{ // 回调函数   当仓库中的状态发生改变就会执行回调函数
        // 获取最新的状态
        console.log("最新的状态是：", store.getState());
    })

    // 如何仓库中的状态发生改变？你需要派发一个action
    store.dispatch(increment);
    // store.dispatch(increment);
    // store.dispatch(increment);

分析store.dispatch(increment)执行流程：

第一次当执行store.dispatch(increment)，它会调用reducer，我们会给reducer传递两上参数，
   一个是state，它是老的状态，一个是action，action中必定有一个叫type属性，type属性值是
   “INCREMENT”，它就执行到：return { number:state.number+1}  state是之前的老的状态，
   就会在老的状态的基础上加1，return {number:1}

第二次store.dispatch(increment);时，
    同样会调用reducer，会给reducer传递两个参数，一个是state，此时state是上一次修改完状态后的
    state，不是initState， 也就是{number:1}  ====>  {nubmer:2}

第三次store.dispatch(increment);时：
    对于reducer来说，老状态就是{nubmer:2} ......

redux-devtools插件

要调试状态的变化，需要安装一个插件，叫redux-devtools

安装插件还需要配置

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
let store = Redux.createStore(
    reducer,
    composeEnhancers()   // 启动redux调试
);

reducer是一个纯函数：

reducer是一个纯函数：
什么是纯函数：同样的输入，得到同样的输出。老状态和新状态需要保持数据结构一样。

几点：

  1. 任何时候，只要是同样的输入，必须得到同样的输出，无论是今天，昨天，明天，后天，结果要一样。
  2. 任何环境下，只要是同样的输入，必定得到同样的输出，无论是浏览器，node，原生app等。

在reducer中不能出现如下代码：

  1. 和时间有关的api data对象
  2. 不能操作dom 不能fs操作
  3. 不能调用系统api
  4. 不能发送http请求
  5. 不能使用Math.random等不纯方法

action creators

action是一个JS对象，描述一个操作状态的动作，里面必定有一个属性叫type。

action creators:
action creators是一个函数, 返回一个action， 此函数的作用是用来创建action。

let initState = {number:0}

// action
/*let increment = { type:"INCREMNT" }
let decrement = { type:"DECREMNT" }*/

// action creator  作用：创建action   increment()
// action中除了type属性外，还可以有其它参数，通常可以传递一个东西payload
function increment(step) {
    return{ type:"INCREMNT",step:step }
}
function decrement(step) {
    return{ type:"DECREMNT",step:step }
}

function reducer(state=initState,action){
    switch (action.type) {
        case "INCREMNT":
            return {number: state.number+action.step}
        case "DECREMNT":
            return {number: state.number-action.step}
        default:
            return state;
    }
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = Redux.createStore(reducer,composeEnhancers())   // 启动redux调试
// console.log(store)

// 订阅
store.subscribe(()=>{
    console.log("现在的状态是：", store.getState())
})

// 发布
store.dispatch(increment(10))
store.dispatch(decrement(5))

state状态初始化

1）可以在创建reducer时，指定初始状态：
    function reducer(state=initState,action){
2）还可以在创建store时，指定初始化状态：
    let store = Redux.createStore(reducer,initState,composeEnhancers())

let initState = { number:0 }
function reducer(state,action){
   switch (action.type) {
       case "INCREMENT":
           return {number: state.number+action.step}
       case "DECREMENT":
           return {number: state.number-action.step}
       default:
           return state;
   }
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = Redux.createStore(reducer,initState,composeEnhancers())

// action creator 作用是用来创建action
// 有人把action creator也叫action
function increment(step){
   // 此时action除了type属性，还有一个step属性，这个step属性叫payload
   return { type:"INCREMENT",step }
}
function decrement(step){
   // 此时action除了type属性，还有一个step属性，这个step属性叫payload
   return { type:"DECREMENT",step }
}

// 订阅
store.subscribe(()=>{
   console.log(store.getState())
})
// 发布
store.dispatch(increment(100))

react-redux

要想在react中的使用redux，还需要借助另一个库，这个库叫react-redux。

  • react.js
  • redux.js
  • react-redux 用于把react和redux连接起来

安装

npm i redux
npm i react-redux

展示型组件：

如果一个组件中没有定义state，也没有从redux中获取状态，这个组件就叫展示型组件，也叫UI组件，也叫木偶组件，也叫笨拙组件…
它的数据源只能是props

智能组件：

如果一个组件中定义和state，或者从redux中获取了state，这个组件就是智能组件。也叫容器组件。
它的数据源可以是自己的state，也可以是redux

在项目开发中，如果是智能组件，一般放containers这个文件夹，container是容器的意思。也有人放到pages中。
如果是展示型组件，放到components文件夹。

安装

ange997
关注
专栏目录
06.在项目中用react-redux进行应用数据管理
zhuhui2000的博客
05-30 229
1.首先在终端安装redux和react-redux yarn add redux yarn add react-redux 安装好之后重启终端 npm start 2.在src目录下新建一个文件夹store，在store目录下新建两个文件:index.js,reducer.js 在index.js中：我们需要引入redux和reducer import { createStore } f...
redux和react-redux
weixin_60508127的博客
03-18 961
（3）昨天学了redux，今天以登录案例再打了一遍，笔记做好，先来张图 （2）布局配置：actions文件夹负责所有的action.js，reducers文件夹负责所有的reducer.js ） （3）定义一个contant.js,该模块是用于定义action对象中type类型的常量值 (4) 在actions里面定义专门为Login组件生成action对象:目的只有一个，便于管理的同时防止程序员单词写错 import {USER_TOKEN} from '../contant' //同
生命周期函数、redux的使用（一）
感恩、奋进、自信
03-13 4805
在定义React组件的时候，render()函数返回的html必须只有一个根元素，要想这个根元素不显示并且不占据页面空间，可以从react中引进Fragment组件 JSX语法细节 在JSX里面写注释的方法： 多行注释： {/*注释注释*/} 单行注释： { //注释注释 } 属性：dangerouslySetInnerHTML={{_html: item}}可以让内容ite...
React应用架构设计
大灰狼的小绵羊哥哥的博客
07-02 427
本文将开始详细分析如何搭建一个React应用架构。一. 前言https://mp.weixin.qq.com/s/G3lQ1yo2CL4Ce92VY_m0xg现在已经有很多脚手架工具，如create-react-app，支持一键创建一个React应用项目结构，很方便，但是享受方便的同时，也失去了对项目架构及技术栈完整学习的机会，而且通常脚手架创建的应用技术架构并不能完全满足我们的业务需求，需要我们...
【Redex】使用及案例分析
qq_45677671的博客
05-13 1809
文章目录需求：不用 Redex使用 Redex知识点总结： 需求： 我们写一个计数器 +：点击后 +1 -：点击后 -1 ++：点击后延时后 +1 不用 Redex App.jsx 文件 import React ,{Component} from 'react'; class App extends Component{ constructor(props) { super(props); this.state = { count:0 } }
redux 案例 （求和）
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
05-06 516
案例 react版 注意: this.setState({count:count+value1}) 需要1才能实现加减效果 否则就是字符串拼接 Count 组件 内容 import React, { Component } from 'react' export default class Count extends Component { state = { count: 0 } // 加 increment = () => { const { value } = thi
redux与react-redux简述
路漫漫其修远兮~
10-24 866
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分
【React】react-redux 案例
qq_45677671的博客
05-13 1171
文章目录容器组件和UI组件改写计数器知识点总结 容器组件和UI组件 React-Redux 将所有组件分成两大类： UI 组件（presentational component） 容器组件（container component） UI组件 容器组件 作用 描述如何展现（骨架、样式） 描述如何运行（数据获取、状态更新） 直接使用Redux 否 是 数据来源 props 监听Redux state 数据修改 从props调用回调函数 向Redux派发actions
redux与react-redux
北巷的博客
10-12 1220
redux与react-redux
React使用redux react-redux redux-thunk
lihaipi的博客
07-21 808
React redux [ˈriˌdʌks] 〇、预备 安装 npm install --save redux npm install --save react-redux(基础款用不上) npm install --save redux-thunk npm install --save-dev redux-devtools(不必要) 一、基础版 已经将reducer和actions抽出 1.仓库文件 // 1.创建仓库对象，解构必要的函数，并引入redux-thunk改装增强redux import {
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。...git clone git@github.com:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
react-redux-promise-example:使用react-redux和redux-promise的非常基本的示例
04-30
react-redux-promise-example 使用react-redux和redux-promise的非常基本的示例 To Start the Application Run server - go to server repo - run npm install - node index.js In main app - run npm install - ...
react-redux-ts：React样板
02-06
**React-Redux-TS：React样板** React是一个流行的JavaScript库，用于构建用户界面，特别是单页应用程序（SPA）。Redux是一个可预测的状态管理工具，它帮助开发者管理应用中的全局状态。TypeScript是JavaScript的一...
create-redux-app:用于React和Redux的简单样板代码
05-16
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 安装依赖项 导入组件 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） ...
react-typescript-redux-saga:React Redux Redux-Saga打字稿样板
05-14
在IT行业中，React、Redux、Redux-Saga以及TypeScript是构建高效、可维护的前端应用的重要工具。这个名为"react-typescript-redux-saga"的项目是利用这些技术创建的一个样板应用，旨在帮助开发者快速搭建一个具备渐...
永磁同步电机（PMSM）基于高阶滑模观测器（HSMO）的无位置传感器速度控制仿真
最新发布
10-01
永磁同步电机（PMSM）基于高阶滑模观测器（HSMO）的无位置传感器速度控制仿真。
该课题为基于Matlab的数字水印系统。带有一个人机交互界面。方法包括DCT和DW
10-01
该课题为基于Matlab的数字水印系统。带有一个人机交互界面。方法包括DCT和DWT。实现方式流程为_digital-watermarking
基于Java开发的xuai项目设计源码
10-01
该项目是一款采用Java语言开发的xuai项目设计源码，整体架构包含70个文件，其中Java源代码文件24个，XML配置文件18个，以及少量其他辅助文件类型，如IML构建配置、Git忽略规则、文本描述等。该项目源码结构清晰，易于理解和维护，适合对Java开发感兴趣的爱好者学习和研究。
基于django-drf的JavaScript后端资产管理实习项目设计源码
10-01
本项目为北京电子科技学院2024年7月计算机实习题目A1——资产管理，基于django-drf框架开发。项目源码包含2694个文件，其中SVG文件2045个，JavaScript文件207个，CSS文件104个，Python编译文件75个，Python源文件73个，Less文件48个，JavaScript源映射文件38个，PNG图片文件30个，SCSS文件19个，WOFF字体文件16个。项目采用JavaScript作为主要开发语言，辅以Python和Shell脚本，旨在实现高效的资产管理功能。
Redux、React-Redux与Redux-Saga精华总结
"redux、react-redux、redux-saga的总结" Redux是JavaScript应用程序的状态管理库，尤其常用于React应用。它提供了“可预测化的状态管理”机制，使得在大型项目中，管理和跟踪应用的状态变得简单而有序。Redux的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值