redux詳細介紹

2021-10-14 04:20:41 字數 1987 閱讀 8283

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 根據請求的位...