React 教程第十一篇 —— Redux 簡介和簡單實現

DK_Lan發表於2018-05-24
ReactRedux

Redux

前端框架的元件式開發永遠有一道鴻溝——跨元件通訊。我在 Vue 教程中有提到過，如果對跨元件通訊不明白的可先跳過去看看。

React 不同與雙向資料繫結框架，它是單向資料流，所以每次更新都得呼叫setState，所以在跨元件通訊中會比較迂迴。還有就是 React 沒有邏輯分層，在開發過程中，邏輯分層是很重要的。

Redux 實現了跨元件通訊和邏輯分層的好處，所以在 React 中使用 Redux 更配。

Redux 簡單實現

為了說明問題，先來一個公共物件實現跨元件通訊。當然這個也是 flux 的實現原理。

actions.js
export default {
    increment(){
        return {
            type: "+"
        }
    },
    decrement(){
        return {
            type: `-`
        }
    }
}
reducer
export default (state = 0, action) => {
    switch(action.type){
        case `+`:
            return state + 1;
        case `-`:
            return state - 1;
        default:
            return state;
    }
}

component

import React, {Component} from `react`
import {createStore} from `redux`
import Actions from `./actions`
import Reducer from `./reducer`

const store = createStore(Reducer);

export default class Component1 extends Component{
    constructor(props){
        super(props);
        this.state = {count: 0}
    }
    increment = () => {
        store.dispatch(Actions.increment());
        this.setState({
            count: store.getState()
        })
    }
    
    render(){
        return (
            <div>
                <h3>component-cp1-{this.state.count}</h3>
                <input type="button" value="increment" onClick={this.increment}/>
            </div>
        )
    }
}

小結——分層

  • Actions 層

    • 使用者行為操作，由使用者在 View 層觸發 store.dispatch(Actions.increment());
    • 行為操作應該為一個 function且必須返回有type屬性的物件
    • 每個方法都應該由store進行派發。

  • Reducer 層

    • 必須是一個純函式(一個函式的返回結果只依賴於它的引數，並且在執行過程裡面沒有副作用)
    • 接受兩個引數，第一個為state，另一個為action
    • return的結果可以用store.getState()來接收

  • Store 層

    • redux的一個方法，接受reducer，返回一個物件store
    • 物件store的方法dispath用於派發action
    • 通過dispath派發的action會觸發reducer

  • View 層

    • 檢視層，也就是元件
    • 通過getState()獲取的值然後再setState便可以顯示。

相關文章