从 redux-observable 史诗中访问状态

IT技术 javascript reactjs redux rxjs redux-observable
2021-05-08 11:38:56

我正在使用 redux 来构建一个小的 fusball-manager。基本上它是一个页面,显示两支球队的得分和一些按钮来增加它们。我有一些操作,例如{ type:"GOAL_UP", team:"red" }减速器将更改状态中的相应值(分数)。

现在我想添加一个史诗,每当它遇到GOAL_UP检查两支球队之一是否赢得比赛时。如果一个团队的得分达到了 8,我希望它发出一个GAME_WON动作。我的问题是我必须访问状态才能知道每个团队的得分。我找不到从史诗中访问状态的方法。

访问状态是否超出了 redux-observable 的范围?如果是这样,你会如何解决这个问题?

我正在考虑将新分数作为GOAL_UP动作中的一个属性像这样的东西{ type:"GOAL_UP", team:"red", newScore:8 }但不知何故,这感觉不对。我还在 fusball-table 上有两个物理按钮,它们与网络套接字连接,用于调度GOAL_UP动作。由于它们不是从我的 ui 触发的,因此它们不知道状态。

GAME_WON如果任一团队的得分为 8,我也可以考虑在我的 ui 组件的渲染函数中分派动作。但这感觉更错误:)

非常欢迎输入,谢谢

1个回答

查看redux-observable 文档Accessing the Store's State部分。

它描述了除了动作流(第一个参数)之外,您的史诗如何接收存储状态流(第二个参数)。

使用state$.value同步访问的当前状态。该值将包含您的整个redux 存储状态。

请注意,当一个动作到达您的史诗时,它已经通过您的减速器运行(以及更新的任何状态)。

const INCREMENT = 'INCREMENT';
const INCREMENT_IF_ODD = 'INCREMENT_IF_ODD';

const increment = () => ({ type: INCREMENT });
const incrementIfOdd = () => ({ type: INCREMENT_IF_ODD });

const incrementIfOddEpic = (action$, state$) =>
  action$.ofType(INCREMENT_IF_ODD)
    .filter(() => state$.value.counter % 2 === 0)
    .map(increment);

// later...
dispatch(incrementIfOdd());

我还要补充一点,如上所述,我认为您不需要 redux-observable 甚至 redux 来实现这一点——这有点矫枉过正。当然,如果这只是为了让你的脚湿透和学习,无论如何!只是不想让您认为您需要这些复杂的抽象来处理简单的事情。