「 React 」redux

kevin 發(fā)布于2019-08-23 17:01 / 432人閱讀

摘要：簡介是一個獨(dú)立專門用于做狀態(tài)管理的庫不是插件庫它可以用在等項(xiàng)目中但演變至今基本與配合使用作用集中式管理應(yīng)用中多個組件共享的狀態(tài)如果不是比較復(fù)雜的組件間通信的情況下建議還是不使用因?yàn)闀斐纱a量的上升和復(fù)雜關(guān)鍵模塊保存狀態(tài)的主要部分共享的狀態(tài)

簡介

1) redux是一個獨(dú)立專門用于做狀態(tài)管理的JS庫(不是react插件庫)
2) 它可以用在react, angular, vue等項(xiàng)目中, 但演變至今基本與react配合使用
3) 作用: 集中式管理react應(yīng)用中多個組件共享的狀態(tài)

Tip:redux如果不是比較復(fù)雜的組件間通信的情況下,建議還是不使用,因?yàn)闀斐纱a量的上升和復(fù)雜

關(guān)鍵模塊

Store

保存狀態(tài)的主要部分,共享的狀態(tài)數(shù)據(jù)保存在該對象中

Action Creators

工廠函數(shù),主要用來生成action對象,傳輸更新的狀態(tài)數(shù)據(jù).

Reducers

接收action對象,對之前的狀態(tài)和action中的新狀態(tài)進(jìn)行操作,并且返回新的結(jié)果存在store中.

關(guān)鍵函數(shù)

store.createStore()

創(chuàng)建store對象,參數(shù)傳入reducers進(jìn)行綁定.

store.dispatch()

分發(fā)action對象,傳入reducers,進(jìn)行狀態(tài)的更新.

store.subscribe()

監(jiān)聽事件,當(dāng)有狀態(tài)改變時,會自動調(diào)用監(jiān)聽的方法(一般用來重新渲染方法)

使用示例 1.下載安裝

//此處我使用的是yarn,后面兩個后面介紹
yarn add redux  react-redux  redux-thunk

2.創(chuàng)建文件目錄

3.各部分內(nèi)容

store.js

import { createStore,applyMiddleware } from "redux"
import reducer from "./reducer"   //導(dǎo)入reducer進(jìn)行綁定
import thunk from "redux-thunk"    //這是一個異步解析實(shí)現(xiàn)

export default createStore(reducer,applyMiddleware(thunk)); // 導(dǎo)出store對象

action-creator.js

import { INCREASE, DECREASE } from "./action-type"  //全局命名聲明文件

// 不同的操作,返回action對象,type為標(biāo)識,data為傳輸?shù)臄?shù)據(jù)
export const incresement = (data) => ({ type:INCREASE,data:data})  

export const decresement = (data) =>({type:DECREASE,data:data})

//模擬異步操作,返回的是主動進(jìn)行分發(fā)操作的一個函數(shù)
export const incresementAsync = (data) => {
    return (dispatch) => {
      setTimeout(()=>{
        dispatch(incresement(data))
      },1000)
    }
    
}

reducer.js

import {INCREASE,DECREASE} from "./action-type"

//當(dāng)有dispatch被調(diào)用時,會自動來遍歷該模塊中的所有函數(shù),并進(jìn)行匹配.
//previousState為之前的狀態(tài),action中包含著新的數(shù)據(jù)
export default function number(previousState = 0,action) {
    switch(action.type){
        case INCREASE:
        return previousState + action.data;
        case DECREASE:
        return previousState - action.data;
        default:
        return previousState;
    }
}

action-type.js

//聲明定義了一些命名
export const INCREASE = "INCREASE";

export const DECREASE = "DECREASE";

App.js

import React, { Component } from "react"
import { connect } from "react-redux"
import { incresement, decresement,incresementAsync } from "./redux/action-creator"
class App extends Component {

// 進(jìn)行更新操作
  increase = () => {
    this.props.incresement(1)
  }

  decrease = () => {
    this.props.decresement(1)
  }

  increaseAsync = () => {
    this.props.incresementAsync(1)
  }

  render() {
    return (
      
      //獲取狀態(tài)值
        click {this.props.number} times
        
        
        
      
    )
  }
}
//關(guān)鍵在這里,這是簡寫的方式.
//得益于react-redux,將創(chuàng)建action對象和dispatch的操作都進(jìn)行了封裝簡化,并且封裝了獲取狀態(tài)值.
//不管是進(jìn)行獲取還是更新操作,都封裝進(jìn)了props屬性中.
export default connect(
  (state) => ({ number: state }),
  { incresement, decresement,incresementAsync }
)(App)

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux"
import store from "./redux/store"
import App from "./App";

// 用Provider包裝,就省略了用subscribe()監(jiān)聽的回調(diào).
ReactDOM.render(, document.getElementById("root"));

react-redux

專門用來簡化redux在react中使用的一個庫.
它將原生redux的.getState(),創(chuàng)建action對象,dispatch等方法進(jìn)行了封裝.提供如上代碼的簡寫方式.

redux-thunk

用來幫助解析異步操作.
只需要在創(chuàng)建store對象的時候用中間件包裝的方式作為第二個參數(shù)傳入即可.

擴(kuò)展調(diào)試工具

redux-devtools-extension.

在谷歌商店中裝好這個插件,然后在創(chuàng)建store對象的時候

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

總結(jié)

redux在復(fù)雜項(xiàng)目中比較適合使用.它保存著一些多處需要共享的狀態(tài)數(shù)據(jù),在整個項(xiàng)目中比較方便進(jìn)行狀態(tài)數(shù)據(jù)的更新以及獲取.

避免了一些層級比較多或者跨越了比較多級的同級兄弟組件需要互相通信的復(fù)雜過程.

GPU云服務(wù)器云服務(wù)器 react-redux React_Redux_Appointm react-router-redux Redux

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103668.html

發(fā)表評論

登陸后可評論

0條評論

kevin

男|高級講師

我要關(guān)注我要私信

TA的文章

leetcode每日一題-495:提莫攻擊

閱讀 2966·2021-11-11 16:55
周鴻祎談科技報(bào)國：解決網(wǎng)絡(luò)安全“卡脖子”難題

閱讀 527·2021-09-27 13:36
域命名主機(jī)如何轉(zhuǎn)移-域主機(jī)更改域用戶usb權(quán)限？

閱讀 1100·2021-09-22 15:35
Sublime Text3配置使用教程整理

閱讀 2923·2019-08-30 12:46
UCloud云主機(jī)MariaDB軟件源配置

閱讀 3134·2019-08-26 17:02
JavaScript棧內(nèi)存和堆內(nèi)存

閱讀 1836·2019-08-26 11:56
【W(wǎng)eb全棧課程二】ES6特性介紹（上）

閱讀 1303·2019-08-26 11:47
「 React 」redux

閱讀 433·2019-08-23 17:01

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

「 React 」redux

click {this.props.number} times

相關(guān)文章

react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài)

react 前端項(xiàng)目技術(shù)選型、開發(fā)工具、周邊生態(tài)

***React手稿之 React-Redux***

***react-redux***

***react開發(fā)教程（十）redux結(jié)合react***

發(fā)表評論

0條評論

kevin

男|高級講師

TA的文章

leetcode每日一題-495:提莫攻擊

周鴻祎談科技報(bào)國：解決網(wǎng)絡(luò)安全“卡脖子”難題

域命名主機(jī)如何轉(zhuǎn)移-域主機(jī)更改域用戶usb權(quán)限？

Sublime Text3配置使用教程整理

UCloud云主機(jī)MariaDB軟件源配置

JavaScript棧內(nèi)存和堆內(nèi)存

【W(wǎng)eb全棧課程二】ES6特性介紹（上）

「 React 」redux

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

「 React 」redux

click {this.props.number} times

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！