React Redux簡(jiǎn)單實(shí)現(xiàn)

YPHP 發(fā)布于2019-08-20 18:13 / 2689人閱讀

摘要：設(shè)計(jì)思想應(yīng)用是一個(gè)狀態(tài)機(jī)試圖與狀態(tài)是一一對(duì)應(yīng)的所有的狀態(tài)保存在一個(gè)對(duì)象里基本改變和就是保存數(shù)據(jù)的地方你可以把它看成一個(gè)容器整個(gè)應(yīng)用只能有一個(gè)提供這個(gè)函數(shù)用來(lái)生成函數(shù)接受另一個(gè)函數(shù)作為參數(shù)返回新生成的對(duì)象對(duì)象包含所有數(shù)據(jù)如果想得到某個(gè)時(shí)點(diǎn)的數(shù)

設(shè)計(jì)思想

1.web應(yīng)用是一個(gè)狀態(tài)機(jī),試圖與狀態(tài)是一一對(duì)應(yīng)的.
2.所有的狀態(tài),保存在一個(gè)對(duì)象里.

基本改變和API

1.Store
Store就是保存數(shù)據(jù)的地方,你可以把它看成一個(gè)容器,整個(gè)應(yīng)用只能有一個(gè)Store.
Redux提供createStore這個(gè)函數(shù),用來(lái)生成Store.

import { createStore } from "redux";
const store = createStore(reducer);
createStore函數(shù)接受另一個(gè)reducer函數(shù)作為參數(shù),返回新生成的Store對(duì)象.

2.State
State對(duì)象包含所有數(shù)據(jù),如果想得到某個(gè)時(shí)點(diǎn)的數(shù)據(jù),就要對(duì)Store生成快照,這種時(shí)點(diǎn)的數(shù)據(jù)集合,
就叫做State.當(dāng)前時(shí)刻的State,可以通過(guò)store.getState()拿到.

const state = store.getState();

3.Action
state的變化,會(huì)導(dǎo)致view的變化,但是,用戶接觸不到state,只能接觸到view,所以.stated的變化必須是view導(dǎo)致的.Action就是view發(fā)出的通知,表示state應(yīng)該要發(fā)生變化了.
Action是一個(gè)對(duì)象,其中的type屬性是必須的,表示Action的名稱,其他屬性可以自由設(shè)置.

const action = {
    type: "ADD_TODO",
    payload: "learn Redux"
};

Action的名稱是ADD_TODO,它攜帶的信息是字符串Learn Redux.
可以這樣理解,Action描述當(dāng)前發(fā)生的事情,改變State的唯一方法,就是使用Action,它會(huì)運(yùn)送數(shù)據(jù)到Store.

4.Action Creator
View要發(fā)送多少種信息,就會(huì)有多少種Action,可以定義一個(gè)函數(shù)生成Action,這個(gè)函數(shù)就叫ActionCreator.

const ADD_TODO = "添加 TODO";
function addToDo(text) {
    return {
        type: ADD_TODO,
        text
    }
}

5.store.dispatch()
store.dispatch()是view發(fā)出Action的唯一方法.

store.dispatch(addTODO("Learn Redux"));

6.reducer
store收到Action以后,必須給出一個(gè)新的State,這樣view才會(huì)發(fā)生變化.
這種State的計(jì)算過(guò)程就叫做Reducer.
Reducer是一個(gè)函數(shù),他接受Action和當(dāng)前State作為參數(shù),返回一個(gè)新的State.

export default (state = 0, action) => {
    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
        case "getSource":
            return "bbbb";
        default:
            return 0;
    }
}

reducer函數(shù)收到名為ADD的action以后,就返回一個(gè)新的state,作為加法的計(jì)算結(jié)果,其他計(jì)算的邏輯,
也可以根據(jù)Action的不同來(lái)實(shí)現(xiàn).
實(shí)際應(yīng)用中,Reducer函數(shù)不用像上面這樣手動(dòng)調(diào)用,store.dispatch方法會(huì)觸發(fā)Reducer的自動(dòng)執(zhí)行.
為此,Store需要知道Reducer函數(shù),做法就是生成Store的時(shí)候,將Reducer傳入createStore方法.

const store = createStore(reducer);

createStore接受Reducer作為參數(shù),生成一個(gè)新的Store.以后每當(dāng)store.dispatch發(fā)送過(guò)來(lái)一個(gè)新的Action,
就會(huì)自動(dòng)調(diào)用Reducer,得到新的State.
7.純函數(shù)
Reducer函數(shù)最重要的特征是,它是一個(gè)純函數(shù),也就是說(shuō),只要是同樣的輸入,必須得到同樣的輸出.
由于Reducer是純函數(shù),就可以保證同樣的State,必定得到同樣的view,但正因?yàn)檫@一點(diǎn),Reducer函數(shù)里面不能改變
State,必須返回一個(gè)全新的對(duì)象.

return Object.assign({}, state, { thingToChange })
export default (state = 0, action) => {
    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
        case "getSource":
            return "bbbb";
        case "ajax":
            return action.data;
        case "ajaxError":
            return action.data
        default:
            return 0;
    }
}

8.store.subscribe()
Store允許使用store.subscribe方法設(shè)置監(jiān)聽(tīng)函數(shù),一旦State發(fā)生變化,就自定執(zhí)行這個(gè)函數(shù).

store.subscribe(listener);

顯然,只要把view的更新函數(shù)(render或this.setState)放入listen,就會(huì)實(shí)現(xiàn)view的自動(dòng)渲染.
let unsubscribe= store.subscribe(() => console.log(store.getState()));
unsubscribe();

Store的實(shí)現(xiàn)

1.store.getState(),store.dispatch(),store.subscribe()

let { subscribe, dispatch, getState } = createStore(reducer);

Reducer的拆分

Reducer函數(shù)負(fù)責(zé)生成State,由于整個(gè)應(yīng)用只有一個(gè)state對(duì)象,包含所有數(shù)據(jù),對(duì)于大型應(yīng)用來(lái)說(shuō),這個(gè)State
必然十分龐大,導(dǎo)致Reducer函數(shù)也十分龐大.
Redux提供了一個(gè)combineReducers方法,用于Reducer的拆分,你只要定義各個(gè)子Render函數(shù),
然后用這個(gè)方法,將它們合成一個(gè)大的Reducer.

import { combineReducers } from "redux";

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

工作流程

1.用戶發(fā)出Action

store.dispatch(action);

2.Store自動(dòng)調(diào)用Reducer,并且傳入兩個(gè)參數(shù),當(dāng)前State和收到的Action.Reducer會(huì)返回新的State.

let nextState = todoApp(previousState, action);

3.State一旦有變化,Store就會(huì)調(diào)用監(jiān)聽(tīng)函數(shù).

store.subscribe(listener);

4.listener可以通過(guò)store.getState()得到當(dāng)前狀態(tài),如果使用的是React,這時(shí)可以觸發(fā)重新渲染view.

function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}

實(shí)例

import React, { Component } from "react";
import { render } from "react-dom";
import reducer from "../reducers/reducer.js";
import { createStore } from "redux";

const store = createStore(reducer);

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            source: "aaaa",
            ajaxSource: "ajax"
        };
    }
    handleAdd = () => {
        store.dispatch({
            type: "INCREMENT"
        });
    }
    handleDel = () => {
        store.dispatch({
            type: "DECREMENT"
        });
    }
    handleGet = () => {
        store.dispatch({
            type: "getSource"
        })
    }
    handleAjax = () => {
        fetch("../api/response.json")
        .then(response => response.json())
        .then((res) => {
            store.dispatch({
                type: "ajax",
                data: res
            });
        }).catch((err) => {
            store.dispatch({
                type: "ajaxError",
                data: err
            });
        })
    }
    render() {
        let _this = this;
        store.subscribe(() => {
            let o = store.getState();
            _this.setState({
                [o.type]: store.getState()[o.type]
            })
        });
        return (
            
                { this.state.count }
                
                
                { this.state.source }
                
                { this.state.ajaxSource.res }
                
            
        );
    }
}

render(, document.getElementById("root"));

export default (state = 0, action) => {
    switch (action.type) {
        case "INCREMENT":
            return Object.assign({}, state, {
                count: state + 1,
                type: "count"
            });
        case "DECREMENT":
            return Object.assign({}, state, {
                count: state - 1,
                type: "count"
            });
        case "getSource":
            return Object.assign({}, state, {
                source: action.dada,
                type: "source"
            });
        case "ajax":
            return Object.assign({}, state, {
                ajaxSource: action.data,
                type: "ajaxSource"
            })
        case "ajaxError":
            return Object.assign({}, state, {
                ajaxSource: action.data,
                type: "ajaxSource"
            });
        default:
            return state
    }
}