Redux中subscribe的作用及說(shuō)明
更新時(shí)間：2023年10月07日 11:30:58 作者：*唔西迪西*
由于redux使用這方面有很多的不解,不是很熟練,所以我查找資料,進(jìn)行一個(gè)總結(jié),希望可以鞏固知識(shí),并且能幫助到需要的人,所以我會(huì)寫(xiě)的比較清晰簡(jiǎn)單明了點(diǎn),若有不對(duì)之處,請(qǐng)大家糾正
Redux中subscribe的作用
redux的使用步驟過(guò)程
首先安裝redux
安裝命令：
npm install redux
redux使用過(guò)程（原理）
- 使用函數(shù)createStore創(chuàng)建store數(shù)據(jù)點(diǎn)
- 創(chuàng)建Reducer。它要改變的組件，它獲取state和action，
- 生成新的state 用subscribe監(jiān)聽(tīng)每次修改情況
- 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)聽(tīng)store中每次修改情況
? ?store.subscribe(()=>{
? ? ? ? ? ? this.setState(store.getState())
? ? ? ? })Redux的store.subscribe()監(jiān)聽(tīng)
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前后端同構(gòu)渲染，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
React Hook useState useEffect componentD
這篇文章主要介紹了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解React開(kāi)發(fā)必不可少的eslint配置
本篇文章主要介紹了詳解React開(kāi)發(fā)必不可少的eslint配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
眾所周知，react推出了hooks之后，很多項(xiàng)目就開(kāi)始往hooks上靠攏，所以也就出現(xiàn)了class和hooks交叉使用的項(xiàng)目。這個(gè)時(shí)候使用ref需要注意一些東西2021-06-06
useRef是react的自定義hook,它用來(lái)引用一個(gè)不需要渲染的值,這篇文章介紹useRef的簡(jiǎn)單用法,感興趣的朋友一起看看吧2024-01-01
原生+React實(shí)現(xiàn)懶加載(無(wú)限滾動(dòng))列表方式
這篇文章主要介紹了原生+React實(shí)現(xiàn)懶加載(無(wú)限滾動(dòng))列表方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
react項(xiàng)目升級(jí)報(bào)錯(cuò),babel報(bào)錯(cuò),.babelrc配置兼容等問(wèn)題及解決
這篇文章主要介紹了react項(xiàng)目升級(jí)報(bào)錯(cuò),babel報(bào)錯(cuò),.babelrc配置兼容等問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React ts模式使用http-proxy-middleware代理時(shí)訪(fǎng)問(wèn)報(bào)404問(wèn)題
這篇文章主要介紹了React ts模式使用http-proxy-middleware代理時(shí)訪(fǎng)問(wèn)報(bào)404問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
在React中使用Antd上傳并讀取Excel文件的詳細(xì)步驟
在React中使用Antd組件庫(kù)來(lái)上傳并讀取Excel文件,可以結(jié)合antd的Upload組件和xlsx庫(kù)來(lái)實(shí)現(xiàn),以下是一個(gè)詳細(xì)的步驟和示例代碼,展示如何在React應(yīng)用中實(shí)現(xiàn)這一功能,感興趣的小伙伴跟著小編一起來(lái)看看吧2025-01-01
這篇文章主要給大家介紹了React三種避免子組件無(wú)效刷新的解決方案,使用React.memo,使用React.useMemo或React.useCallback,將子組件作為children來(lái)傳遞這三種方案,文章通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08