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

標籤：原則   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】