成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Redux 入門

miracledan / 735人閱讀

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

1.什么是Redux

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

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

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

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

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

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

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

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

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

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

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

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

使用純函數(shù)來執(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)槊看螘玫讲灰粯拥慕Y(jié)果

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

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

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

3.Redux中的概念 3.1 Action

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

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

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

type，必須，string或者Symbol

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

error,可選，標(biāo)識這個action是否有錯誤，true or false

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

3.2 Reducer

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

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

3.3 Store

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

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

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

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

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

用戶通過View，dispatch 相應(yīng)的action，store調(diào)用reducer獲取最新的state，并觸發(fā)通過subscribe訂閱的監(jiān)聽函數(shù)，監(jiān)聽函數(shù)中我們通過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;

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80726.html

相關(guān)文章

  • react-redux插件入門

    摘要：描述這個插件可以讓我們的代碼更加的簡潔和美觀。安裝使用提供了兩個重要的接口使用了這個插件，的和就可以忘記來，它們就用不著了。現(xiàn)在有美女個。 可先查看我的redux簡單入門 react-redux簡介 react-redux是使用redux開發(fā)react時使用的一個插件，另外插一句，redux不是react的產(chǎn)品，vue和angular中也可以使用redux；下面簡單講解，如何使用rea...

    Baaaan 評論0 收藏0

  • Redux入門0x106: `react`、`vue`、`原生 js`集成`redux`

    摘要：概述之前寫的所有關(guān)于的文章都是純粹的，是和框架無關(guān)環(huán)境無關(guān)的，所以我沒有將和一起講，為的是吧和分開，作為獨(dú)立的個體來分析，提現(xiàn)的是一種思想，而不是一個思維定式。而現(xiàn)在我們可以嘗試在中來使用了。 0x000 概述 之前寫的所有關(guān)于redux的文章都是純粹的redux，是和框架無關(guān)、環(huán)境無關(guān)的redux，所以我沒有將redux和react一起講，為的是吧redux和react分開，作為獨(dú)立...

    BetaRabbit 評論0 收藏0

  • Reactjs、redux的從入門到放棄、刪庫跑路示例

    摘要：我的入門到放棄之路最近看到很多相關(guān)的問題跟討論，越來越多的小伙伴喜歡這個框架了，同時也在看到了有些入門的小伙伴遇到了各種各樣的問題，本人也是框架使用都一枚，公司是騰訊阿里平安三巨頭合資的一家公司，分別上海深圳杭州北京廣州等多個分部，前端人員 showImg(https://segmentfault.com/img/bVbhonB?w=1278&h=722); 我的react入門到放棄之...

    Miracle 評論0 收藏0

  • redux入門事例

    摘要：中定義來各個要做的事情。代碼定義把封裝成一個方法，這樣用的時候不用每次定義，避免出錯入口文件封裝成方法，方便下面的的訂閱調(diào)用每當(dāng)時，訂閱的函數(shù)就會執(zhí)行現(xiàn)在有機(jī)關(guān)槍把。通過的來觸發(fā)，中訂閱的事件就會執(zhí)行。觸發(fā)，獲取的值。 環(huán)境準(zhǔn)備 為了方便，這里使用create-react-app搭建react環(huán)境 create-react-app mydemo 彈出配置 如果需要自定義react的配置...

    cheng10 評論0 收藏0

  • React-Redux 入門教程

    摘要：具體了解此方法可以請戳這里最后把對象暴露給在主入口進(jìn)行調(diào)用我們通過提供的頂層組件傳入然后把要展示的寫入頂層組件就行了，提供了整個全局的供所有的子組件進(jìn)行調(diào)用具體代碼實(shí)現(xiàn)請 項(xiàng)目目錄 showImg(https://segmentfault.com/img/bVTGs8?w=214&h=571); 整個項(xiàng)目目錄分為圖中所示： Redux分為{Action,Reducer,Store} 入...

    xuweijian 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<