Reactjs 如何在TypeScript中使用React、Redux进行API调用

我正在使用

typescript fsa

和

typescript fsa reducer

包在typescript应用程序中简单地创建操作和reducer

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();

const actionCreator=actionCreatorFactory（）；
导出函数signInHandler（状态：UserState，操作：action）：UserState{
// ????
返回{…状态}；
}
export const signIn=actionCreator.async（“用户登录”）；
导出const UserReducer=reducerWithInitialState（{signedIn:false}为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);

导出默认连接(
（state:RootState）=>（{}作为StateProps），
（分派：分派）=>{
返回{
登录：（用户名：字符串，密码：字符串）=>分派（登录已开始（新登录请求（用户名，密码）））
};
}
)（签名）；

现在我被卡住了。我不知道如何对我的API进行HTTP调用，这样我就可以在组件分派操作时发送请求，在API的响应到达时分派下一个操作。我想用承诺。

---

如何解决这个问题？

在React中，如果没有

类型脚本fsa

抽象，您将在action creator级别进行异步API调用，因为action只是被调度到POJO，并且简化程序应该没有任何副作用

有两个项目使这项工作变得容易，并且。我更喜欢redux thunk，因为它更容易让你的头脑清醒。基本上，您的动作创建者通过了

分派

功能，然后他们可以负责分派多个内容。。。像这样：

function asyncActionCreator(dispatch) {
  dispatch(startAsyncAction());

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

在您的

typescript fsa

世界中，有一些配套软件包可用于这两个方面：和

---

似乎

typescript fsa redux thunk

采用了与上述示例类似的方法，使用了“动作工作者”的概念，通过

typescript fsa

协调动作的调度。这是一个很好的回购示例。

您看过

typescript fsa

中关于异步操作的文档吗？是的，但我不知道应该在哪里调用API。动作，动作创建者还是还原者？我想看一个例子