1)redux中的核心中store,store中的放有state,單一資料來源,狀態只能**於倉庫。
2)state是唯讀的,你只能獲取狀態,你不能暴力地去修改倉庫中的狀態
3)store state reducer action
4)dispatch subscrbe getstate
建立倉庫:
"./js/redux.js"
>
<
/script> 相當於在頁面中引入redux。
在redux這個物件上,有乙個api,叫createstore,呼叫它,就可以建立乙個倉庫。
使用倉庫:
dispatch subscrbe getstate
action:
本質就是乙個js物件,這個物件中需要有乙個屬性,叫type,用來描述乙個動作。
reducer:
本質是乙個函式,純函式,根據不同的action和上一次的狀態,返回乙個新的狀態
function
reducer
(state=initstate, action)
case
"decrement"
:return
default
:return state
}}
學習redux,需要站在兩個角度:
1)如何去建立倉庫(使用craetestore,準備reducer,準備action,準備初始化狀態)
2)如何去使用倉庫(3個api)
dispath:用於派發乙個action
getstate:獲取最新狀態(狀態只能從倉庫中獲取)
subscribe:訂閱 一旦訂閱了,當倉庫中狀態發生了改變,就會執行你訂閱的函式,在這個函式中你就可以做一些你想做的事情。
const composeenhancers = window.__redux_devtools_extension_compose__
呼叫composeenhancers()
let store = redux.
createstore
(reducer,
composeenhancers()
)
action:
本質是乙個物件,是用來描述乙個動作的。它裡必須要有乙個type屬性。
let increment =
let decrement =
action creator:
本質是乙個函式,這個函式的返回值是乙個action。
function
increment
(payload)
}function
decrement
(payload)
}
對於初始化狀態:
1)可以在宣告reudcer時指定
2)在建立倉庫時,也可以指定初始化狀態
合併管理員
import
from
"redux"
import counter from
"./counter"
import todos from
"./todos"
// reducer就是把兩個reducer合併成了乙個reducer
let reducer =
combinereducers()
export
default reducer;
// 匯出合併後的reducer
在createstore內部會直接呼叫dispatch Redux基本介紹
react 只是 dom 的乙個抽象層,並不是 web 應用的完整解決方案。有兩個方面,它沒涉及。結構 元件之間的通訊 對於大型的複雜應用來說,這兩方面恰恰是最關鍵的。因此,只用 react 沒法寫大型應用 為了解決這個問題,2014年 facebook 提出了 flux 架構 的概念,引發了很多的...
robots txt詳細介紹
robots.txt基本介紹 當乙個搜尋機械人 有的叫搜尋蜘蛛 訪問乙個站點時,它會首先檢查該站點根目錄下是否存在robots.txt,如果存在,搜尋機械人就會按照該檔案中的內容來確定訪問的範圍 如果該檔案不存在,那麼搜尋機械人就沿著鏈結抓取。另外,robots.txt必須放置在乙個站點的根目錄下,...
nginx phases 詳細介紹
我們知道,nginx 請求分為下面幾個階段 下面對這些過程詳細介紹 一 ngx http post read phase do nothing 二 ngx http server rewrite phase do nothing 三 ngx http find config phase 根據請求的位...