Redux中subscribe的作用及说明

 更新时间:2023年10月07日 11:30:58   作者:*唔西迪西*  
由于redux使用这方面有很多的不解,不是很熟练,所以我查找资料,进行一个总结,希望可以巩固知识,并且能帮助到需要的人,所以我会写的比较清晰简单明了点,若有不对之处,请大家纠正

Redux中subscribe的作用

redux的使用步骤过程

首先安装redux

安装命令:

npm install redux

redux使用过程(原理)

  • 使用函数createStore创建store数据点
  • 创建Reducer。它要改变的组件,它获取state和action,
  • 生成新的state 用subscribe监听每次修改情况
  • dispatch 一个派发方法,将action 派发给reducer 更改state

代码如下:

创建一个组件

import React, { Component } from 'react'
import store from "./store";
import axios from 'axios';
export class DD extends Component {
    constructor(props){
        super(props);
        this.state = store.getState();
        //subscribe当store中数据发生变化就会更新数据
        store.subscribe(()=>{
            this.setState(store.getState())
        })
    }
    render() {
        return (
            <div>
                hengheng,我很生气
            </div>
        )
    }
}
export default DD

主要用subscribe监听store中每次修改情况

   store.subscribe(()=>{
            this.setState(store.getState())
        })

Redux的store.subscribe()监听

import createStore from 'Redux'
const { store } = createStore(reducer)
store.subscribe(放上view的更新函数)//对于React   则是render和setState

此后 更新函数的每一次变化都会触发view的重新自动渲染

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • react+antd 递归实现树状目录操作

    react+antd 递归实现树状目录操作

    这篇文章主要介绍了react+antd 递归实现树状目录操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • React如何优雅的捕获异常

    React如何优雅的捕获异常

    捕获异常是来定位你错误代码的。本文主要介绍了 React如何捕获异常,你知道多少种方法,ErrorBoundary,ErrorBoundary-try-catch等等。本文就来详细的介绍一下
    2021-06-06
  • React获取url后面参数的值示例代码

    React获取url后面参数的值示例代码

    这篇文章主要介绍了React获取url后面参数的值示例代码,代码简单易懂,文末给大家补充介绍了react获取URL中参数方法,需要的朋友可以参考下
    2022-12-12
  • React Native系列之Recyclerlistview使用详解

    React Native系列之Recyclerlistview使用详解

    这篇文章主要为大家介绍了React Native系列之Recyclerlistview使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • ahooks封装cookie localStorage sessionStorage方法

    ahooks封装cookie localStorage sessionStorage方法

    这篇文章主要为大家介绍了ahooks封装cookie localStorage sessionStorage的方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • React-router中结合webpack实现按需加载实例

    React-router中结合webpack实现按需加载实例

    本篇文章主要介绍了React-router中结合webpack实现按需加载实例,非常具有实用价值,需要的朋友可以参考下
    2017-05-05
  • React 组件的状态下移和内容提升的操作方法

    React 组件的状态下移和内容提升的操作方法

    这篇文章主要介绍了React 组件的状态下移和内容提升,通过代码讲解了渲染性能的组件问题结合实例代码给大家讲解的非常详细,需要的朋友可以参考下
    2022-11-11
  • 一文带你深入理解React中的Context

    一文带你深入理解React中的Context

    React Context是React提供给开发者的一种常用的状态管理机制,本文主要来和大家讲讲为什么需要Context,又是如何使用Context的,感兴趣的可以了解一下
    2023-05-05
  • react新版本生命周期钩子函数及用法详解

    react新版本生命周期钩子函数及用法详解

    这篇文章主要介绍了react新版本生命周期钩子函数及用法详解,本文通过示例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • 使用React-Router时出现的错误及解决

    使用React-Router时出现的错误及解决

    这篇文章主要介绍了使用React-Router时出现的错误及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论