redux基礎知識 | redux（二）

redux的組成部分

直接上圖，從上圖中能夠看出，全部的數據（好比state）被保存在一個被稱爲store的容器中 → 在一個應用程序中只能有一個store。store本質上是一個狀態樹，保存了全部對象的狀態。任何UI組件均可以直接從store訪問特定對象的狀態。要經過本地或遠程組件更改狀態，須要分發一個action。分發在這裏意味着將可執行信息發送到store。當一個store接收到一個action，它將把這個action代理給相關的reducer。reducer是一個純函數，它能夠查看以前的狀態，執行一個action而且返回一個新的狀態。

最簡單的案例

咱們實現一個最基本的點擊按鈕加減操做

store/index.js

import { createStore } from 'redux';

const countReducer = (state = 0, action) => {
    const {type, payload} = action
    switch(type) {
        case 'ADD':
            return state + payload;
        case 'MINUS':
            return state - payload;
        default:
            return state
    }
}
const store = createStore(
    countReducer
)
export default store;
複製代碼

先建立一個store

ReduxPage.js

import React, { Component } from 'react'
import store from '../store/'

export default class ReduxPage extends Component {
    componentDidMount() {
        this.unsubscribe = store.subscribe(() => {
            this.forceUpdate()
        })
    }
    componentWillUnmount() {
        if(this.unsubscribe) {
            this.unsubscribe()
        }
    }
    add = () => {
        store.dispatch({type: 'ADD', payload: 1})
    }
    minus = () => {
        store.dispatch({type: 'MINUS', payload: 1})
    }
    render() {
        return(
            <div> <h3>Reduxpage</h3> <p>{store.getState()}</p> <button onClick={this.add}>同步+</button> <button onClick={this.minus}>同步-</button> </div>
        )
    }
}
複製代碼

好，咱們已經實現了redux。就是這麼簡單。上面的有個注意的地方，就是必定要在更新的時候進行監聽，否則沒法更新Dom的內容。

咱們再回顧一下基本的流程：store裏面有一個counterReducer，它是一個純函數，傳入的是state，返回的是新的state，裏面定義了修改state的規則，而後把這個counterReducer注入到store裏面，咱們就可使用store定義的一些方法幹一些事情了。在ReduxPage.js裏面，咱們用了store.getState()這個方法訪問了state的值。當點擊按鈕的時候，咱們會經過store.dispatch觸發一個ation,counterReducer收到這個action之後。會根據action的type，來執行相應的修改規則，而後對state做出更新，當state更新的時候,store.subscribe()會監聽state的變化，而後經過this.forceUpdate()更新了Dom，這樣，一個完整的redux就實現了它應該實現的功能。

下面進入源碼，咱們去看看具體是怎麼實現的

最簡單的源碼

咱們須要實現一個createStore類，而後去實現它內部的幾個方法

Jredux/createStore.js

export default function createStore(reducer) {
    let currentState;
    let currentlistenrs = [];
    
    function getState() {
        return currentState;
    }
    function dispatch(action) {
        currentState = reducer(currentState, action)
        currentlistenrs.forEach(listener => listener())
    }
    function subscribe(listener) {
        currentlistenrs.push(listener)
        return () => {
            const index = currentlistenrs.indexOf(listener)
            currentlistenrs.splice(index, 1)
        }
    }
    
    // 初始化
    dispatch({type: 'Jredux'});

    return {
        getState,
        dispatch,
        subscribe
    }
}
複製代碼

就這麼簡單，一個redux的源碼就寫完了，咱們用上面的這個代碼也能夠實現按鈕加減的操做了。

參考連接

• 本文章源碼

下期分享

redux異步的實現方式 | redux（三）