综合技术

Redux + Typescript: Use class to define Actions

微信扫一扫,分享到朋友圈

Redux + Typescript: Use class to define Actions
0

You want the actions to be typed. You should use interface or class.

Class is better than interface because in interfaces you cannot define the action "type" as a constant, but in classes you can:

class LoadingStartedAction implements Action{
    readonly type = LOADING_STARTED
}

However a class instance is not a plain object, but Redux requires plain objects to be dispatched.

This can be handled by a middleware which converts the class instances to plain objects

// See https://github.com/reduxjs/redux/issues/992#issuecomment-167964652
const typedActionToPlain = (store: any) => (next: any) => (action: any) =>  {
    next(Object.assign({}, action));
};

export default typedActionToPlain;

Pay attention not to step into the toe of Thunk middleware

const rootStore = createStore(rootReducer,
    applyMiddleware(thunkMiddleware,
        typedActionToPlain //this must be after thunk, otherwise it will try to convert an async function to a plain object
    )
);

阅读原文...


Avatar

成为优秀Angular开发者所需要学习的19件事

上一篇

汇桔网赋能AI企业,知识产权掀起人工智能新浪潮

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Redux + Typescript: Use class to define Actions

长按储存图像,分享给朋友