redux基礎整理

設計和使用原則

基本概念

1.store

store 就是儲存資料的地方，相當於乙個容器，整個專案只能有乙個 store。

redux 提供createstore這個函式，用來生成 store。

import
from
'redux'
;const store =
createstore
(fn)
;//createstore函式接受另乙個函式作為引數，返回新生成的 store 物件。

2.state可以通過store.getstate()拿到。

import
from
'redux'
;const store =
createstore
(fn)
;const state = store.
getstate()
;

3.actionstate 的變化，會導致 view 的變化。view 發出的通知action ，表示 state 即將發生變化。

action 是乙個物件，其中的type屬性是必須的，是 action 的名稱，其他屬性可以自由設定。

const action =,}
;

action 的名稱是user_login，它攜帶的資訊是username，password。

action 描述了當前發生的事情。改變 state 的唯一辦法，就是使用 action，它會把資料運送到 store。

4.action creator

view 要傳送多少種訊息，就會有多少種 action。定義乙個函式來生成 action，這個函式就叫 action creator。

const
user_login
='使用者登入'
;function
userlogin
(text)
}const action =
userlogin()
;

上面**中，userlogin函式就是乙個 action creator。

5.store.dispatch()

store.dispatch()：傳送action。

import
from
'redux'
;const store =
createstore
(fn)
;store.
dispatch(}
);

上面**中，store.dispatch接受乙個 action 物件作為引數，將它傳送出去。

加上action creator，這段**可以改寫如下：

store.
dispatch
(userlogin()
);

6.reducerstore 接收到 action 之後，必須返回乙個新的 state，這樣 view 才會發生變化。

這種 state 的計算過程就叫做 reducer。

reducer 是乙個函式，它接受 action 和當前 state 作為引數，返回乙個新的 state。

const
reducer
=function
(state, action)
;

整個專案的初始狀態，可以作為 state 的預設值。如圖：

補充：fromjs()

immutable.js 的api。

作用：將乙個js資料轉換為immutable型別的資料

用法：fromjs(value, converter)

簡介：value是要轉變的資料，converter是要做的操作。第二個引數可不填，預設情況會將陣列準換為list型別，將物件轉換為map型別，其餘不做操作。

7.純函式

reducer 函式最重要的特徵是，它是乙個純函式。也就是說，只要是同樣的輸入，必定得到同樣的輸出。

由於 reducer 是純函式，就可以保證同樣的state，必定得到同樣的 view。但也正因為這一點，reducer 函式裡面不能改變 state，必須返回乙個全新的物件。

// state 是乙個物件
function
reducer
(state, action)
, state,);
// 或者
return;}
// state 是乙個陣列
function
reducer
(state, action)

最好把 state 物件設成唯讀。你沒法改變它，要得到新的 state，唯一辦法就是生成乙個新物件。這樣的好處是，任何時候，與某個 view 對應的 state 總是乙個不變的物件。

8.store.subscribe()

store 允許使用store.subscribe方法設定監聽函式，一旦 state 發生變化，就自動執行這個函式。

import
from
'redux'
;const store =
createstore
(reducer)
;store.
subscribe
(listener)
;

拆分reducer根reducer的結構完全可以自己決定。redux原生提供combinereducers()輔助函式，來把根reducer拆分成多個函式，用於分別處理state樹的乙個分支。

**示例如圖：

redux工作流程：

如圖：可以理解為乙個借書的人，首先他要知道自己要借什麼書（action creators），然後把書名告訴圖書館管理員（store），圖書館管理員去檢視記錄本（reducers），去查詢這本書的位置。找到之後圖書館管理員知道後（newstate）再告訴這個人書位置的資訊（重新渲染view）。

1.呼叫store.dispatch(action)，傳送action。

2.store會把兩個引數傳入reducer：當前的state樹和action，並返回乙個新的state。

3.state一旦有變化，store就會呼叫監聽函式。

4.listener可以通過store.getstate()得到當前狀態，重新觸發渲染view。

redux基礎整理

redux 個人整理

redux入門基礎

redux概念基礎

redux基礎整理

redux 個人整理

redux入門基礎

redux概念 基礎

相關推薦

redux概念基礎