【凡塵】---redux---【react】

來源:互聯網
上載者:User

標籤:原則   test   reduce   返回   src   def   輸入   reducer   strong   

一、flux的缺陷

 

因為dispatcher和Store可以有多個互相管理起來特別麻煩

 

二、什麼是redux

 

其實redux就是Flux的一種進階實現。它是一個應用資料流架構,主要作用應用狀態的管理

 

設計思想:

(1)、web應用就是一個狀態機器,視圖和狀態一一對應

(2)、所有的狀態儲存在一個對象裡面

 

三大原則:

(1)、單一資料來源

整個store被儲存在一個Object tree(對象樹)中,並且這個Object tree只存在於唯一一個store中

(2)、state是唯讀

唯一改變state的方法就是觸發action,action是一個用於描述已發生事件的普通對象

 

(3)、使用純函數來修改(reducer)

為了描述action如何改變state tree,你需要編寫reducers

 

三、redux適用的情境

 

(1)、使用者的使用方式複雜

(2)、不同身份的使用者有不同的使用方式(比如普通使用者和管理員)

(3)、多個使用者之間可以協作

(4)、與伺服器大量互動,或者使用了WebSocket

(5)、View要從多個來源擷取資料

當項目多互動、多資料來源的時候必須用到redux

 

從組件的角度來看什麼時候用到redux

(1)、某個組件的狀態,需要共用

(2)、某個狀態需要在任何地方都可以拿到

(3)、一個組件需要改變全域狀態

(4)、一個組件需要改變另一個組件的狀態

 

四、redux的工作流程

                     

如果我們有一個組件,那麼想要擷取資料就需要從Store中擷取資料,當組件需要改變Store資料的時候。需要建立一個Action,然後通過 dispatch(action) 傳遞給Store,然後Store把Action轉寄給Reducers. Reducers會拿到previousState(以前的state資料) 和action。然後將previousState和action進行結合做新的資料(store)修改。然後產生一個新的資料傳遞給Store 。Store發送改變那麼View也會發生改變

 

 

五、建立Store

 

 

 

在Flux中Store是我們手動建立的,但是在redux中Store是redux提供的

 

(1)、安裝 yarn add redux --dev

 

(2)、引入 import { createStore } from "redux";

 

(3)、建立一個store = createStore(reducer)

 

這樣建立一個store我們沒有辦法進行存值,因此我們需要在createState中傳遞一個參數reducer這個參數就相當於Flux中的dispatcher遺留產物。這個遺留產物有一個規範就是內部必須是一個純函數

 

(4)、建立reducer.js

這個函數裡面有2個參數一個是state,另一個是action。

state指的是store中的資料

action指的是View修改資料的時候傳遞過來的action

 

這個函數必須返回一個新的資料,而且還不能對老的資料進行修改(Reducer函數中不能改變state,必須返回一個全新的對象)

 

我們可以先把這個state設定一個預設值defaultState。在defaultState這個對象中我們可以定義一些初始的資料

 

官方解釋reducer:

Reducer 只是一些純函數,它接收先前的 state 和 action,並返回新的 state。剛開始你可以只有一個 reducer,隨著應用變大,你可以把它拆成多個小的 reducers,分別獨立地操作 state tree 的不同部分,因為 reducer 只是函數,你可以控制它們被調用的順序,傳入附加資料,甚至編寫可複用的 reducer 來處理一些通用任務,如分頁器

 

(5)、匯出Store

 

匯出的store這個對象中預設內建了一些方法

(1)、dispatch:用來傳遞action

(2)、getState:傳回值就相當於this.state中的資料,裡面存放著公用的資料

(3)、replaceReducer:

(4)、subscribe:監聽資料的改變,必須傳遞一個函數

(5)、Symbol(observable):

 

六、建立Action

 

七、將Action傳遞給store  

 

方法:store.dispatch(action)

當調用完這個方法後action會自動傳遞給reducer,這也是我們為什麼在reducer中定義參數action    的原因。在reducer中我們會對action中的type進行比較,如果比較成功則返回一個新的state

 

八、監聽資料的改變

store.subscribe()

 

 

九、如何將reducer拆分成多個reducers

 

(1)、引入combineReducers

import { combineReducers, createStore } from "redux";

 

(2)、合并多個reducers

let reducer = combineReducers({ todoReducers, tabReducers })

 

(3)、建立store

let store = createStore(reducer)

 

栗子:

 

 

注意:在使用state的時候要注意使用的誰的state

 

十、純函數的概念

 

同樣的輸入必須得到同樣的輸出

 

約束:

不得修改參數

不能調用系統I/O的API

不能調用Date.now()或者Math.random()等不純的方法,因為每次得到值是不一樣的結果 

 

十一、redux與flux的區別

 

Redux沒有Dispatcher,且不支援多個store,Redux只有一個單一的store和一個根級的reducer函數。隨著應有的不斷變大,根級的reducer要拆分成多個小的reducers,分別獨立的操作state的不同部分,而不是添加新的 stores。這就像一個 React 應用只有一個根級的組件,這個根組件又由很多小工具構成

【凡塵】---redux---【react】

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.