具有负载类型的 Redux Observable Action 不匹配。但是没有有效载荷它的工作

Question

代码如下

import { Action } from "redux";
import { ActionsObservable, ofType, combineEpics } from 'redux-observable'
import { map } from 'rxjs/operators'

export enum ActionTypes {
    One = 'ACTION_ONE',
    Two = 'ACTION_TWO'
}

export interface One extends Action {
    type: ActionTypes.One
    //commnent out next line to remove error
    myStr: string
}

export const doOne = (myStr: string): One => ({ 
    type: ActionTypes.One,
    //comment out next line to remove error
    myStr 
})

export interface Two extends Action {
    type: ActionTypes.Two
    myBool: boolean
}

export const doTwo = (myBool: boolean): Two => ({ type: ActionTypes.Two, myBool })

export type Actions = One | Two

export const epic = (action$: ActionsObservable<Actions>) => 
    action$.pipe(
        ofType<Actions, One>(ActionTypes.One),
        map((action: any) => ({
            type: ActionTypes.Two,
            myBool: true
        }))
    )

export const rootEpic = combineEpics(epic)

还有我如何生成商店

import { createEpicMiddleware } from "redux-observable"
import { createStore, applyMiddleware } from "redux"
import { reducer } from "./reducer"
import { rootEpic } from "./epic"

export const configStore = () => {

    const epicMiddleware = createEpicMiddleware()

    const store = createStore(reducer, applyMiddleware(epicMiddleware))

    epicMiddleware.run(rootEpic)

    return store
}

我花了最后 4 个小时尝试将有效负载添加到操作中，但所有可能的过滤器解决方案都失败了。我试着在 redux observable github 部分和他们的聊天室寻求帮助。我还用谷歌搜索了严格输入的简单示例。没有找到任何解决方案。

Answer 1

我遇到了和你一样的问题，我的解决方法是：

当您严格输入您的史诗时：

export const epic = (action$: ActionsObservable<Actions>)

// Not the subject, but I would prefer
export const epic: Epic<Actions> = action$ =>

您也必须严格输入您的 epicMiddleware：

const epicMiddleware = createEpicMiddleware<Actions>()

这样，您的 epicMiddleware.run 方法将尝试 Actions 而不是 Action<any>，它应该可以工作。

Answer 2

只需按照 typesafe-action github 示例即可。这个存储库真的很关心被严格键入。 Redux 可观察者只关心它是否适用于 javascript。如果它不适用于严格类型化的打字稿，那么他们就会忽略这个问题。并忽略任何寻求帮助的请求。幸运的是，typesafe-action 示例是使用 redux observable 构建的，所以它对我有用。

具有负载类型的 Redux Observable Action 不匹配。但是没有有效载荷它的工作

Redux Observable Action with payload types don't match. But without payload its working

typescript

reactjs

redux

redux-observable