如何在 Action Creator 中存取 Redux 狀態？

在Action Creators 中存取Redux 狀態

Redux 操作通常設計得“精簡”，僅包含更新應用程式所需的資訊狀態。然而，在某些情況下，可能需要存取動作創建者內的全域儲存狀態。本文探討了兩種方法，並提供了它們的使用指南。

使用單例儲存

一種方法涉及匯入單例儲存並直接存取其狀態。

import store from '../store';

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
    items: store.getState().otherReducer.items,
  }
}

雖然這種方法實作起來很簡單，但它嚴重依賴作為單例的儲存並作為模組導入公開。不鼓勵這種設計，因為它會阻礙伺服器渲染的實現，其中每個請求通常需要單獨的儲存實例。

使用 Redux Thunk 中介軟體

建議的方法是利用 Redux Thunk 中介軟體。 Thunk 中間件允許將非同步函數作為操作分派，提供對 getState() 方法的存取。

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return (dispatch, getState) => {
    const {items} = getState().otherReducer;

    dispatch(anotherAction(items));
  }
}

這種方法需要使用 Redux Thunk，但它允許在客戶端上靈活存取儲存狀態和伺服器環境。

注意事項

在 Action Creator 中使用 getState() 已經在 Redux 社區中引起了爭論。雖然一些開發人員反對它，但其他開發人員認為它在特定場景中是可以接受的，例如條件調度或存取快取資料。

最終，最佳方法取決於特定的應用要求。如果在操作建立者中需要存取儲存狀態，則可以考慮單例儲存或 Thunk 中介軟體選項。但是，需要注意的是，操作通常應保持“精簡”，以保持清晰度和可追溯性。

以上是如何在 Action Creator 中存取 Redux 狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！