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

【问题标题】：Redux Observable Action with payload types don't match. But without payload its working具有有效负载类型的 Redux Observable Action 不匹配。但没有有效载荷它的工作
【发布时间】：2020-02-16 01:09:05
【问题描述】：

代码如下

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 部分和他们的聊天室寻求帮助。我还搜索了严格输入的简单示例。没有找到任何解决方案。

【问题讨论】：

我能够通过使用 (action$:any) 而不是 (action$: ActionsObservable) 让它工作，但它不是完美的解决方案。
这实际上是一个非常好的问题，我也想要一个更好的答案。
我最终输入了 rootEpic 作为从不表示它接受泛型类型（基本上）
我完全放弃了 redux，现在用普通的钩子保持全局状态。事实上，我很快就会完全放弃对最热门的新框架 sveltekit 的反应。
我刚刚开始使用 react 和 redux 重建我公司的应用程序，因为它遵循与 Angular 相同的模式。我对 svelt 的了解还不够，无法自信地推荐它作为一个框架。

标签： reactjs typescript redux redux-observable

【解决方案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>，它应该可以工作。

【讨论】：

我在export const epic: Epic<Actions> = action$ => 行收到以下错误。 '(source: Observable) => Observable' 类型的参数不可分配给 'OperatorFunction' 类型的参数。类型“Observable”不可分配给类型“Observable”。类型“Actions”不可分配给类型“PostAction”。类型“ErrorAction”不可分配给类型“PostAction”。属性“类型”的类型不兼容。类型“ActionTypes.ERROR”不可分配给类型“ActionTypes.POSTS”.ts(2345)
如果你可以在 typescript 中创建非常基本的 redux observable 示例，而不是修复我的代码，那么它将对我有很大帮助。

【解决方案2】：

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

【讨论】：