「 React 」redux

簡介

1) redux是一個獨立專門用於作狀態管理的JS庫(不是react插件庫)
2) 它能夠用在react, angular, vue等項目中, 但演變至今基本與react配合使用
3) 做用: 集中式管理react應用中多個組件共享的狀態

Tip:redux若是不是比較複雜的組件間通訊的狀況下,建議仍是不使用,由於會形成代碼量的上升和複雜

關鍵模塊

1. Store

保存狀態的主要部分,共享的狀態數據保存在該對象中

1. Action Creators

工廠函數,主要用來生成action對象,傳輸更新的狀態數據.

1. Reducers

接收action對象,對以前的狀態和action中的新狀態進行操做,而且返回新的結果存在store中.

關鍵函數

1. store.createStore()

建立store對象,參數傳入reducers進行綁定.

1. store.dispatch()

分發action對象,傳入reducers,進行狀態的更新.

1. store.subscribe()

監聽事件,當有狀態改變時,會自動調用監聽的方法(通常用來從新渲染方法)

使用示例

1.下載安裝

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

2.建立文件目錄

3.各部份內容

store.js

import { createStore,applyMiddleware } from 'redux'
import reducer from './reducer'   //導入reducer進行綁定
import thunk from 'redux-thunk'    //這是一個異步解析實現

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

action-creator.js

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

// 不一樣的操做,返回action對象,type爲標識,data爲傳輸的數據
export const incresement = (data) => ({ type:INCREASE,data:data})  

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

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

reducer.js

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

//當有dispatch被調用時,會自動來遍歷該模塊中的全部函數,並進行匹配.
//previousState爲以前的狀態,action中包含着新的數據
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 {

// 進行更新操做
  increase = () => {
    this.props.incresement(1)
  }

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

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

  render() {
    return (
      <div>
      //獲取狀態值
        <h3>click {this.props.number} times</h3>
        <button onClick={this.increase}>+++</button>
        <button onClick={this.decrease}>---</button>
        <button onClick={this.increaseAsync}>異步加</button>
      </div>
    )
  }
}
//關鍵在這裏,這是簡寫的方式.
//得益於react-redux,將建立action對象和dispatch的操做都進行了封裝簡化,而且封裝了獲取狀態值.
//無論是進行獲取仍是更新操做,都封裝進了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()監聽的回調.
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

react-redux

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

redux-thunk

用來幫助解析異步操做.
只須要在建立store對象的時候用中間件包裝的方式做爲第二個參數傳入便可.

擴展調試工具

redux-devtools-extension.

在谷歌商店中裝好這個插件,而後在建立store對象的時候

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

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

---

總結

redux在複雜項目中比較適合使用.它保存着一些多處須要共享的狀態數據,在整個項目中比較方便進行狀態數據的更新以及獲取.

避免了一些層級比較多或者跨越了比較多級的同級兄弟組件須要互相通訊的複雜過程.