타이프 스크립트에서 redux-actions, redux-thunk 및 redux-promise-middleware 사용

Question

여기에 타이프립트 + redux 생태계에 새로 추가되었습니다.

TypeScript에서 redux-actions, redux-thunk 및 redux-promise-middleware를 사용할 때 유형 정보를 비동기 작업에 올바르게 캡슐화하려면 어떻게해야합니까?

인증의 예 :

/* actions */ 
const login = createAction(LOGIN, authService.login); 


/* authService */ 
async function login(payload: LoginPayload): Promise<LoginResponse> { 
// ... authenticate here. 
} 

내가 REDUX - 약속 - 미들웨어를 사용하고 있기 때문에, 액션 LOGIN_PENDING, LOGIN_FULFILLED/LOGIN_REJECTED가 자동으로 전달됩니다. 감속기가 어떤 액션 객체를 처리하는지 파악할 수있는 유형을 어떻게 만들 수 있습니까?

FSA 다음에 redux-actions가 있기 때문에 _FULFILLED은 action.payload이어야합니다. _REJECTED 나는 AuthAction 유형을 만드는 방법에 대해 갈 것이라고 어떻게 action.error

/* reducer */ 
function loginReducer(state: AppState, action: AuthAction) { 
    switch (action.type) { 
    case LOGIN_FULFILLED: 
     // action.payload should be defined as LoginResponse object here. 
     // action.error shouldnt be present. 
    case LOGIN_REJECTED: 
     // action.error should be defined 
    } 
} 

을해야합니까? 나는 그것이 각각의 액션 타입의 유니온 타입이어야한다고 생각한다. (유니온 타입이 될 수있다.) redux-actions은 Action 및 BaseAction 유형을 제공합니다.

Answer 1

"정상적인"방법은 모든 "작업 인터페이스"와 유니온 유형을 감속기로 지정하는 것입니다. 그런 다음 유형을 켭니다. 그러나 예제 코드에서 AuthAction 유형이 공용 유형인지 확실하지 않습니다. ...

예 :

type T = Object; //Your resolve data type 
interface ILoginAction {type: "LOGIN", payload: {promise: Promise<T> }} 
interface ILoginRejectedAction {type: "LOGIN_REJECTED", error: YourErrorType } 
interface ILoginFulfilledAction {type: "LOGIN_FULFILLED", payload: {data: T }} 

export type LoginActions = ILoginAction | ILoginRejectedAction | ILoginFulfilledAction 

감속기 : 당신은 아마 제네릭을 사용하여 스마트 한 방법으로이 조합을 만들 수 있지만 수동 방식입니다

import { LoginActions } from "./actions"; //Or where your actions are 
function loginReducer(state: AppState, action: LoginActions) { 
    switch (action.type) { 
    case "LOGIN": 
     // action.payload should be defined as LoginResponse object here. 
     // action.error shouldnt be present. 
    case "LOGIN_REJECTED": 
     // action.error should be defined 
    } 
} 

.