Redux中subscribe的作用及說明
更新時(shí)間：2023年10月07日 11:30:58 作者：*唔西迪西*
由于redux使用這方面有很多的不解,不是很熟練,所以我查找資料,進(jìn)行一個(gè)總結(jié),希望可以鞏固知識(shí),并且能幫助到需要的人,所以我會(huì)寫的比較清晰簡單明了點(diǎn),若有不對(duì)之處,請(qǐng)大家糾正
Redux中subscribe的作用
redux的使用步驟過程
首先安裝redux
安裝命令：
npm install redux
redux使用過程（原理）
- 使用函數(shù)createStore創(chuàng)建store數(shù)據(jù)點(diǎn)
- 創(chuàng)建Reducer。它要改變的組件，它獲取state和action，
- 生成新的state 用subscribe監(jiān)聽每次修改情況
- dispatch 一個(gè)派發(fā)方法，將action 派發(fā)給reducer 更改state
代碼如下：
創(chuàng)建一個(gè)組件
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當(dāng)store中數(shù)據(jù)發(fā)生變化就會(huì)更新數(shù)據(jù)
? ? ? ? store.subscribe(()=>{
? ? ? ? ? ? this.setState(store.getState())
? ? ? ? })
? ? }
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? hengheng,我很生氣
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}
export default DD主要用subscribe監(jiān)聽store中每次修改情況
? ?store.subscribe(()=>{
? ? ? ? ? ? this.setState(store.getState())
? ? ? ? })Redux的store.subscribe()監(jiān)聽
import createStore from 'Redux'
const { store } = createStore(reducer)
store.subscribe(放上view的更新函數(shù))//對(duì)于React 則是render和setState此后 更新函數(shù)的每一次變化都會(huì)觸發(fā)view的重新自動(dòng)渲染
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
react+antd 遞歸實(shí)現(xiàn)樹狀目錄操作
這篇文章主要介紹了react+antd 遞歸實(shí)現(xiàn)樹狀目錄操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
捕獲異常是來定位你錯(cuò)誤代碼的。本文主要介紹了 React如何捕獲異常，你知道多少種方法，ErrorBoundary，ErrorBoundary-try-catch等等。本文就來詳細(xì)的介紹一下2021-06-06
這篇文章主要介紹了React獲取url后面參數(shù)的值示例代碼,代碼簡單易懂，文末給大家補(bǔ)充介紹了react獲取URL中參數(shù)方法，需要的朋友可以參考下2022-12-12
React?Native系列之Recyclerlistview使用詳解
這篇文章主要為大家介紹了React?Native系列之Recyclerlistview使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
ahooks封裝cookie?localStorage?sessionStorage方法
這篇文章主要為大家介紹了ahooks封裝cookie?localStorage?sessionStorage的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
React-router中結(jié)合webpack實(shí)現(xiàn)按需加載實(shí)例
本篇文章主要介紹了React-router中結(jié)合webpack實(shí)現(xiàn)按需加載實(shí)例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
React 組件的狀態(tài)下移和內(nèi)容提升的操作方法
這篇文章主要介紹了React 組件的狀態(tài)下移和內(nèi)容提升,通過代碼講解了渲染性能的組件問題結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-11-11
React?Context是React提供給開發(fā)者的一種常用的狀態(tài)管理機(jī)制，本文主要來和大家講講為什么需要Context，又是如何使用Context的，感興趣的可以了解一下2023-05-05
這篇文章主要介紹了react新版本生命周期鉤子函數(shù)及用法詳解,本文通過示例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
使用React-Router時(shí)出現(xiàn)的錯(cuò)誤及解決
這篇文章主要介紹了使用React-Router時(shí)出現(xiàn)的錯(cuò)誤及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03