带有有效负载类型的Redux可观察动作不匹配。但是没有有效负载

时间:2019-10-19 06:02:34

标签: reactjs typescript redux redux-observable

enter image description here

代码如下

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库也失败。

2 个答案:

答案 0 :(得分:0)

我和你有同样的问题,我的解决方法是:

严格键入史诗:

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

答案 1 :(得分:0)

仅遵循typesafe-action github示例。该存储库确实关心严格输入。可观察到的Redux人们只关心它是否与javascript一起使用。如果它不适用于严格类型的打字稿,那么他们只是忽略了这个问题。并忽略任何请求帮助。幸运的是,typesafe-action示例是使用可观察到的redux构建的,因此对我有用。

相关问题