2017-11-11 13 views
0

저는 TypeScript React 응용 프로그램에서 액션과 리듀서를 간단하게 작성하기 위해 typescript-fsatypescript-fsa-reducers 패키지를 사용하고 있습니다. 구성 요소의TypeScript에서 React, Redux를 사용하여 API 호출하는 방법

const actionCreator = actionCreatorFactory(); 

export function signInHandler(state: UserState, action: Action): UserState { 
    // ???? 

    return { ...state }; 
} 

export const signIn = actionCreator.async<SignInRequest, RequestResponse<SignInResponse>>("USER_SIGNIN"); 

export const UserReducer = reducerWithInitialState({ signedIn: false } as UserState) 
    .casesWithAction([signIn.started, signIn.done], signInHandler) 
    .build(); 

사용법 :

export default connect<StateProps, DispatchProps>(
    (state: RootState) => ({} as StateProps), 
    (dispatch: Dispatch<RootState>) => { 
    return { 
       signIn: (userName: string, password: string) => dispatch(signIn.started(new SignInRequest(userName, password))) 
    }; 
    } 
)(SignIn); 

그리고 지금은 갇혔어요. API에서 응답이 도착할 때 구성 요소가 다음 작업을 전달할 때 요청을 보낼 수 있도록 API에 HTTP 호출을하는 방법을 모르겠습니다. 약속을 사용하고 싶습니다. 어떻게 해결할 수 있습니까?

+0

'typescript-fsa'에서 비동기 작업에 대한 문서를 보았습니까? https://github.com/aikoven/typescript-fsa#async-action-creators –

+0

예,하지만 어디에서 API 호출을해야하는지 잘 모르겠습니다. 액션, 액션 크리에이터 또는 리듀서? 예제를보고 싶다. – micnyk

답변

1

typescript-fsa 추상화가없는 상태에서 작업은 작업 작성자 수준에서 비동기 API 호출을 수행합니다. 작업은 POJO 만 전달되고 축소 기는 부작용이 없어야하기 때문입니다.

redux-thunkredux-saga의 두 가지 프로젝트가 있습니다. 머리를 감싸기가 더 쉽기 때문에 나는 redux-thunk을 선호합니다. 기본적으로 액션 제작자가 dispatch 기능을 전달받을 다음 그들은 같은 ... 더 이상의 일을 파견에 대한 책임을 질 수 있습니다

당신의 typescript-fsa 세계에서
function asyncActionCreator(dispatch) { 
    dispatch(startAsyncAction()); 

    doSomethingAsync() 
    .then(result => dispatch(completeAsyncAction(result)) 
    .catch(err => dispatch(errorAsyncAction(err)); 
} 

, 일부 동반자 패키지는 이들 모두가 있습니다 : typescript-fsa-redux-thunktypescript-fsa-redux-saga.

typescript-fsa을 통해 작업의 디스 패칭을 조정하는 "작업자"의 개념을 사용하여 위의 예와 비슷한 방식으로 나타납니다. 이 on the typescript-fsa-redux-thunk repo를 실행하는 좋은 예가 있습니다.

관련 문제