具有有效负载类型的Redux可观察动作不匹配。但没有有效载荷，其工作原理

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
}

也链接到public git repo。我花了最后4个小时尝试将有效负载添加到操作中，但是使用每种可能的过滤器解决方案都失败了。使用TypeSafe-Actions库也失败。

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>，并且应该可以。