Store: the core Redux store methods">Store: the core Redux store methods">
跳到主要內容

Store

儲存包含應用程式的完整狀態樹。變更其內部狀態的唯一方法是對其發送動作,這會觸發根部 reducer 函式計算新的狀態。

儲存不是類別。它只是一個包含一些方法的物件。

若要建立儲存,將根部reducer 函式傳遞給 Redux Toolkit 的configureStore 方法,這將設定一個具有良好預設組態的 Redux 儲存。(或者,如果你尚未使用 Redux Toolkit,你可以使用原始的createStore 方法,但我們鼓勵你盡快將你的程式碼遷移到使用 Redux Toolkit

儲存方法

getState()

傳回應用程式的目前狀態樹。等於儲存庫的減速器傳回的最後一個值。

傳回

(任何):應用程式的目前狀態樹。


dispatch(action)

傳送動作。這是觸發狀態變更的唯一方式。

儲存庫的減速器函式會同步呼叫目前 getState() 結果和指定的 action。其傳回值會被視為下一個狀態。從現在開始,它會從 getState() 傳回,而變更偵聽器會立即收到通知。

注意

如果您嘗試從 減速器 內部呼叫 dispatch,它會擲回一個錯誤訊息,指出「減速器不得傳送動作」。減速器是純函式 - 它們只能傳回新的狀態值,而且不得有副作用(而傳送就是一種副作用)。

在 Redux 中,訂閱會在根減速器傳回新狀態後呼叫,因此您可以在訂閱偵聽器中傳送。您只能在減速器內部禁止傳送,因為它們不得有任何副作用。如果您想要在對動作做出回應時造成副作用,正確的做法是在潛在非同步的 動作建立器 中執行此操作。

引數

  1. action (物件):描述對您的應用程式有意義的變更的純文字物件。動作是將資料傳入儲存庫的唯一方式,因此任何資料,無論是來自 UI 事件、網路回呼或其他來源(例如 WebSockets),最終都必須作為動作傳送。動作必須有一個 type 欄位,用來指出執行的動作類型。類型可以定義為常數,並從其他模組匯入。最好將字串用於 type,而不是 符號,因為字串是可序列化的。除了 type 以外,動作物件的結構完全由您決定。如果您有興趣,請查看 Flux 標準動作,了解如何建構動作的建議。

傳回

(物件):發送的動作(請參閱註解)。

註解

透過呼叫 [`createStore`](/api/createstore) 取得的「香草」儲存體實作僅支援純物件動作,並立即將其傳遞給簡化器。

不過,如果你使用 applyMiddleware 包裝 createStore,中介軟體可以不同方式詮釋動作,並提供支援來發送 非同步動作。非同步動作通常是 Promises、Observables 或 thunks 等非同步原語。

中介軟體是由社群建立,並未預設隨 Redux 提供。你需要明確安裝 redux-thunkredux-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(),但有下列注意事項

  1. 監聽器應僅在回應使用者動作或在特定條件下呼叫 dispatch()(例如:在儲存體具有特定欄位時發送動作)。在沒有任何條件的情況下呼叫 dispatch() 在技術上是可行的,但會導致無限迴圈,因為每次 dispatch() 呼叫通常會再次觸發監聽器。

  2. 訂閱會在每次 dispatch() 呼叫之前做快照。如果你在呼叫監聽器時訂閱或取消訂閱,這不會對目前正在進行的 dispatch() 產生任何影響。不過,下一次 dispatch() 呼叫(無論是否巢狀)會使用訂閱清單的較新快照。

  3. 監聽器不應預期會看到所有狀態變更,因為在呼叫監聽器之前,狀態可能已在巢狀 dispatch() 期間更新多次。不過,可以保證在 dispatch() 開始之前註冊的所有訂閱者在 dispatch() 結束時會收到最新的狀態。

它是一個低階 API。很可能你不會直接使用它,而是使用 React(或其他)繫結。如果你通常使用回呼作為一個掛勾來回應狀態變更,你可能會想要撰寫一個自訂的 observeStore 實用程式Store 也是一個 Observable,因此你可以使用像 RxJS 這樣的函式庫來 subscribe 變更。

要取消訂閱變更監聽器,請呼叫 subscribe 回傳的函式。

參數

  1. 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 的熱重載機制,你可能也需要這個。

參數

  1. nextReducer (函式) 儲存要使用的下一個簡化器。