redux-saga 中的 getState？

Question

我有一家商店，里面有商品清單。 當我的應用程序首次加載時，我需要反序列化這些項目，就像基於這些項目創建一些內存中的對象一樣。 這些物品存儲在我的 redux 商店中，並由itemsReducer處理。

作為副作用，我正在嘗試使用redux-saga來處理反序列化。 在第一頁加載時，我發送一個動作：

dispatch( deserializeItems() );

我的故事很簡單：

function* deserialize( action ) {
    // How to getState here??
    yield put({ type: 'DESERISLIZE_COMPLETE' });
}

function* mySaga() {
    yield* takeEvery( 'DESERIALIZE', deserialize );
}

在我的反序列化傳奇中，我想處理創建項目的內存版本的副作用，我需要從商店讀取現有數據。 我不確定如何在這里做到這一點，或者如果這是我什至應該嘗試使用 redux-saga 的模式。

Answer 1

你可以使用選擇效果

import {select, ...} from 'redux-saga/effects'

function* deserialize( action ) {
    const state = yield select();
    ....
    yield put({ type: 'DESERIALIZE_COMPLETE' });
}

您也可以將它與選擇器一起使用

const getItems = state => state.items;

function* deserialize( action ) {
    const items = yield select(getItems);
    ....
    yield put({ type: 'DESERIALIZE_COMPLETE' });
}

Answer 2

如果我們在回調函數中，當Saga不處理代碼流時，選擇效果對我們沒有幫助。 在這種情況下，只需將dispatch和getState傳遞給root saga：

store.runSaga(rootSaga, store.dispatch, store.getState)

並傳遞給兒童傳奇的參數

export default function* root(dispatch, getState) { yield all([ fork(loginFlow, dispatch, getState), ]) }

然后在觀察方法

export default function* watchSomething(dispatch, getState) ...

Answer 3

除了@Kokovin Vladislav的回答之外，如果我們喜歡使用Typescript的類型，我們可以使用redux-toolkit在此文檔中引入的“定義類型掛鈎”模式： https://redux-toolkit.js.org/tutorials /typescript#define-typed-hooks 。

因此，在app/hooks.ts文件中我們有：

import { useDispatch, useSelector } from 'react-redux'
import type { TypedUseSelectorHook } from 'react-redux'
import type { RootState, AppDispatch } from './store'

import { select } from 'redux-saga/effects'

// Use throughout your app instead of plain `useDispatch` and `useSelector` ( From redux-toolkit docs )
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

// THIS IS THE ADDITIONAL SELECTOR!!!!!!!
export function* appSelect<TSelected>( selector: (state: RootState) => TSelected, ): Generator<any, TSelected, TSelected> { return yield select(selector); }

然后在您的生成器 function 中，您可以像這樣執行類似操作：

import { appSelect } from "app/hooks"

function* deserialize( action ) {
    const items = yield* appSelect(state => state.items);
    ....
    yield put({ type: 'DESERIALIZE_COMPLETE' });
}

這樣我們在每次調用appSelect()時都有state的強類型和智能感知。

學分： https://github.com/redux-saga/redux-saga/issues/970#issuecomment-880799390