Store
儲存包含應用程式的完整狀態樹。變更其內部狀態的唯一方法是對其發送動作,這會觸發根部 reducer 函式計算新的狀態。
儲存不是類別。它只是一個包含一些方法的物件。
若要建立儲存,將根部reducer 函式傳遞給 Redux Toolkit 的configureStore
方法,這將設定一個具有良好預設組態的 Redux 儲存。(或者,如果你尚未使用 Redux Toolkit,你可以使用原始的createStore
方法,但我們鼓勵你盡快將你的程式碼遷移到使用 Redux Toolkit)
儲存方法
getState()
傳回應用程式的目前狀態樹。等於儲存庫的減速器傳回的最後一個值。
傳回
(任何):應用程式的目前狀態樹。
dispatch(action)
傳送動作。這是觸發狀態變更的唯一方式。
儲存庫的減速器函式會同步呼叫目前 getState()
結果和指定的 action
。其傳回值會被視為下一個狀態。從現在開始,它會從 getState()
傳回,而變更偵聽器會立即收到通知。
引數
action
(物件†):描述對您的應用程式有意義的變更的純文字物件。動作是將資料傳入儲存庫的唯一方式,因此任何資料,無論是來自 UI 事件、網路回呼或其他來源(例如 WebSockets),最終都必須作為動作傳送。動作必須有一個type
欄位,用來指出執行的動作類型。類型可以定義為常數,並從其他模組匯入。最好將字串用於type
,而不是 符號,因為字串是可序列化的。除了type
以外,動作物件的結構完全由您決定。如果您有興趣,請查看 Flux 標準動作,了解如何建構動作的建議。
傳回
(物件†):發送的動作(請參閱註解)。
註解
† 透過呼叫 [`createStore`](/api/createstore) 取得的「香草」儲存體實作僅支援純物件動作,並立即將其傳遞給簡化器。不過,如果你使用 applyMiddleware
包裝 createStore
,中介軟體可以不同方式詮釋動作,並提供支援來發送 非同步動作。非同步動作通常是 Promises、Observables 或 thunks 等非同步原語。
中介軟體是由社群建立,並未預設隨 Redux 提供。你需要明確安裝 redux-thunk 或 redux-promise 等套件才能使用。你也可以建立自己的中介軟體。
若要了解如何描述非同步 API 呼叫、在動作建立器內讀取目前狀態、執行副作用,或將它們串聯起來按順序執行,請參閱 applyMiddleware
的範例。
範例
import { createStore } from 'redux'
const store = createStore(todos, ['Use Redux'])
function addTodo(text) {
return {
type: 'ADD_TODO',
text
}
}
store.dispatch(addTodo('Read the docs'))
store.dispatch(addTodo('Read about the middleware'))
subscribe(listener)
新增變更監聽器。它會在任何動作被發送時呼叫,而狀態樹的某些部分可能會發生變更。然後,你可以在回呼函式內呼叫 getState()
來讀取目前的狀態樹。
你可以從變更監聽器呼叫 dispatch()
,但有下列注意事項
監聽器應僅在回應使用者動作或在特定條件下呼叫
dispatch()
(例如:在儲存體具有特定欄位時發送動作)。在沒有任何條件的情況下呼叫dispatch()
在技術上是可行的,但會導致無限迴圈,因為每次dispatch()
呼叫通常會再次觸發監聽器。訂閱會在每次
dispatch()
呼叫之前做快照。如果你在呼叫監聽器時訂閱或取消訂閱,這不會對目前正在進行的dispatch()
產生任何影響。不過,下一次dispatch()
呼叫(無論是否巢狀)會使用訂閱清單的較新快照。監聽器不應預期會看到所有狀態變更,因為在呼叫監聽器之前,狀態可能已在巢狀
dispatch()
期間更新多次。不過,可以保證在dispatch()
開始之前註冊的所有訂閱者在dispatch()
結束時會收到最新的狀態。
它是一個低階 API。很可能你不會直接使用它,而是使用 React(或其他)繫結。如果你通常使用回呼作為一個掛勾來回應狀態變更,你可能會想要撰寫一個自訂的 observeStore
實用程式。Store
也是一個 Observable
,因此你可以使用像 RxJS 這樣的函式庫來 subscribe
變更。
要取消訂閱變更監聽器,請呼叫 subscribe
回傳的函式。
參數
listener
(函式):任何時候都有動作被派送,且狀態樹可能已經變更時,要呼叫的回呼。你可以在這個回呼內呼叫getState()
來讀取目前的狀態樹。可以合理地預期儲存的簡化器是一個純粹的函式,因此你可以比較狀態樹中某個深層路徑的參照,來得知它的值是否已經變更。
傳回
(函式):一個取消訂閱變更監聽器的函式。
範例
function select(state) {
return state.some.deep.property
}
let currentValue
function handleChange() {
let previousValue = currentValue
currentValue = select(store.getState())
if (previousValue !== currentValue) {
console.log(
'Some deep nested property changed from',
previousValue,
'to',
currentValue
)
}
}
const unsubscribe = store.subscribe(handleChange)
unsubscribe()
replaceReducer(nextReducer)
取代目前儲存用來計算狀態的簡化器。
它是一個進階 API。如果你應用程式實作程式碼分割,而且你想要動態載入某些簡化器,你可能會需要這個。如果你實作 Redux 的熱重載機制,你可能也需要這個。
參數
nextReducer
(函式) 儲存要使用的下一個簡化器。