Redux 入門

miracledan 發(fā)布于2019-08-20 11:58 / 710人閱讀

摘要：只要是同樣的輸入，必定得到同樣的輸出。純函數(shù)是函數(shù)式編程的概念，必須遵守以下一些約束。中的概念執(zhí)行的動(dòng)作，包括動(dòng)作所需要的數(shù)據(jù)，改變數(shù)據(jù)的唯一來(lái)源，一般是通過(guò)將傳到。只是描述了有事情發(fā)生了這一事實(shí)，并沒(méi)有指明應(yīng)用如何更新。

1.什么是Redux

管理Web應(yīng)用全局狀態(tài)的框架。

單頁(yè)面應(yīng)用，顧名思義，和傳統(tǒng)項(xiàng)目的最明顯區(qū)別就是項(xiàng)目只有一個(gè)頁(yè)面，頁(yè)面有一個(gè)根元素，我們寫的每一個(gè)頁(yè)面是一個(gè)大的組件，前端接管路由來(lái)渲染不同的頁(yè)面組件。

隨著應(yīng)用的復(fù)雜，前端需要存儲(chǔ)更多的state，包括緩存的全局?jǐn)?shù)據(jù)，本地生成尚未持久化到服務(wù)器的數(shù)據(jù)，也包括 UI 狀態(tài)，如激活的路由，被選中的標(biāo)簽，是否顯示加載動(dòng)效或者分頁(yè)器等等。

如果是單純的數(shù)據(jù)緩存也沒(méi)什么需要考慮的東西，放到內(nèi)存就可以了，重點(diǎn)是還要讓state和view有綁定的關(guān)系。state的變化能夠觸發(fā)view的變化。

在我們的項(xiàng)目中，沒(méi)有用redux之前，我們都是頁(yè)面組件管理state，出現(xiàn)以下需求的時(shí)候，寫起來(lái)就比較復(fù)雜

某個(gè)組件的狀態(tài)，需要共享

某個(gè)狀態(tài)需要在任何地方都可以拿到

一個(gè)組件需要改變?nèi)譅顟B(tài)

一個(gè)組件需要改變另一個(gè)組件的狀態(tài)

2.Redux的原則和設(shè)計(jì)思想 2.1 三大原則

單一數(shù)據(jù)源：整個(gè)應(yīng)用的 state 被儲(chǔ)存在一棵 object tree 中，并且這個(gè) object tree 只存在于唯一一個(gè) store 中

State 是只讀的：惟一改變 state 的方法就是觸發(fā) action，action 是一個(gè)用于描述已發(fā)生事件的普通對(duì)象。

使用純函數(shù)來(lái)執(zhí)行修改：為了描述 action 如何改變 state tree ，你需要編寫 reducers。只要是同樣的輸入，必定得到同樣的輸出。
純函數(shù)是函數(shù)式編程的概念，必須遵守以下一些約束。

不得改寫參數(shù)
不能調(diào)用系統(tǒng) I/O 的API
不能調(diào)用Date.now()或者M(jìn)ath.random()等不純的方法，因?yàn)槊看螘?huì)得到不一樣的結(jié)果

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

（1）Web 應(yīng)用是一個(gè)狀態(tài)機(jī)，視圖與狀態(tài)是一一對(duì)應(yīng)的。

（2）所有的狀態(tài)，保存在一個(gè)對(duì)象里面。

3.Redux中的概念 3.1 Action

執(zhí)行的動(dòng)作，包括動(dòng)作所需要的數(shù)據(jù)，改變store數(shù)據(jù)的唯一來(lái)源，一般是通過(guò)store.dispatch() 將 action 傳到 store。

Action 本質(zhì)上是 JavaScript 普通對(duì)象。

flux-standard-action FSA標(biāo)準(zhǔn)

type，必須，string或者Symbol

payload，可選，執(zhí)行action所需要的數(shù)據(jù)，任何類型

error,可選，標(biāo)識(shí)這個(gè)action是否有錯(cuò)誤，true or false

meta，可選，任何類型，payload之外的其他數(shù)據(jù)。

3.2 Reducer

根據(jù)action 做更新state的操作。

Action 只是描述了有事情發(fā)生了這一事實(shí)，并沒(méi)有指明應(yīng)用如何更新 state。而這正是 reducer 要做的事情。

3.3 Store

Store就是保存全局state的容器，保存三個(gè)常用的api

getState，獲取當(dāng)前的state

subscribe，給store變化添加監(jiān)聽函數(shù)

dispatch，用于接受action的方法，觸發(fā)reducer和監(jiān)聽函數(shù)

3.4 單項(xiàng)數(shù)據(jù)流

用戶通過(guò)View，dispatch 相應(yīng)的action，store調(diào)用reducer獲取最新的state，并觸發(fā)通過(guò)subscribe訂閱的監(jiān)聽函數(shù)，監(jiān)聽函數(shù)中我們通過(guò)store的getState方法獲取最新的state，更新view。
工作流程圖
)

4.應(yīng)用實(shí)例

simpleredux/index.js

import {createStore} from "redux";
 
export function createAction(type, payload) {
    return {
        type,
        payload
    }
}
const initialState = {
    time: new Date().getTime()
}
 
function reducer(state = initialState, action) {
    switch (action.type) {
        case "NOW_TIME":
            return {
                ...state,
                time: action.payload
            }
        default:
            return state;
    }
}
 
let store;
export function getStore() {
    if(store) return store;
    return store = createStore(reducer);
}

TestRedux.js

"use strict";
 
import React, { Component } from "react";
 
import {
    StyleSheet,
    View,
    Text
} from "react-native";
import MtButton from "@scfe/react-native-button";
import {getStore, createAction} from "../../simpleredux/index";
const store = getStore();
class TestRedux extends Component {
    constructor(props) {
        super(props);
        let state = store.getState();
        this.state = {
            time: state.time
        };
        store.subscribe(()=>{
            let state = store.getState();
            this.setState({
                time: state.time
            });
        });
    }
 
    _sendAction() {
        let action = createAction("NOW_TIME", new Date().getTime());
        store.dispatch(action);
    }
    render() {
        return (
            
                {this.state.time}
                
                
            
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 40
    }
});
 
export default TestRedux;