「 React 」redux

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

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

簡(jiǎn)介

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

Tip:redux如果不是比較復(fù)雜的組件間通信的情況下,建議還是不使用,因?yàn)闀?huì)造成代碼量的上升和復(fù)雜

關(guān)鍵模塊

Store

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

Action Creators

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

Reducers

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

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

store.createStore()

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

store.dispatch()

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

store.subscribe()

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

使用示例 1.下載安裝

//此處我使用的是yarn,后面兩個(gè)后面介紹
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"    //這是一個(gè)異步解析實(shí)現(xiàn)

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

action-creator.js

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

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

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

//模擬異步操作,返回的是主動(dòng)進(jìn)行分發(fā)操作的一個(gè)函數(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í),會(huì)自動(dòng)來遍歷該模塊中的所有函數(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)鍵在這里,這是簡(jiǎn)寫的方式.
//得益于react-redux,將創(chuàng)建action對(duì)象和dispatch的操作都進(jìn)行了封裝簡(jiǎ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

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

redux-thunk

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

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

redux-devtools-extension.

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

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ù),在整個(gè)項(xiàng)目中比較方便進(jìn)行狀態(tài)數(shù)據(jù)的更新以及獲取.

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