source

레독스가로 된 스테이트?

factcode 2023. 3. 20. 23:37
반응형

레독스가로 된 스테이트?

저는 품목 목록이 있는 가게를 가지고 있습니다.앱이 처음 로드될 때 항목을 기반으로 메모리 내 개체를 만들 때처럼 항목을 역직렬화해야 합니다.아이템은 제 레독스 스토어에 저장되며itemsReducer.

디시리얼라이제이션에 대처하기 위해 부작용으로 레독스가를 사용하려고 합니다.첫 페이지 로드 시 액션을 디스패치합니다.

dispatch( deserializeItems() );

내 사연은 단순하게 설정되어 있다.

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

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

아이템의 메모리 내 버전 작성에 따른 부작용에 대처하고 싶은 디시리얼라이즈 사가에서는 스토어에서 기존 데이터를 읽을 필요가 있습니다.어떻게 해야 할지 모르겠고, 그게 레플렉스가로 시도해봐야 할 패턴인지도 모르겠어.

선택 효과를 사용할 수 있습니다.

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' });
}

@Kokovin Vladislav의 답변 외에 Typescript의 입력을 사용하는 경우 https://redux-toolkit.js.org/tutorials/typescript#define-typed-hooks에서 redx-timeout에 의해 도입된 "defined type 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); }

그런 다음 제너레이터 기능에서 다음과 같이 수행할 수 있습니다.

import { appSelect } from "app/hooks"

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

그 때문에, 강력한 타이핑과 인텔리센스를 얻을 수 있습니다.state가 부를 때마다appSelect().

크레딧 : https://github.com/redux-saga/redux-saga/issues/970#issuecomment-880799390

Saga가 코드 플로우를 처리하지 않을 때 콜백 함수에 있는 경우 Select effect는 도움이 되지 않습니다.이 경우 그냥 통과합니다.dispatch그리고.getStatesaga를 루트하려면:

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) ...

언급URL : https://stackoverflow.com/questions/38405700/getstate-in-redux-saga

반응형