从 redux-observable 史诗中访问状态 [英] Accessing the state from within a redux-observable epic

问题描述

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

I am using redux to build a little fusball-manager. Basically it's a page that shows the score of both teams and some buttons to increment them. I have actions like { type:"GOAL_UP", team:"red" } for which the reducer will change the corresponding value (score) in the state.

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

Now I want to add an epic that whenever it encounters a GOAL_UP checks if one of the two teams has won the game. If a team has reached a score of 8, I want it to dispatch a GAME_WON action. My problem is that I have to access the state to know the score of each team. I cannot find a way to access the state from within an epic.

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

Is accessing the state out of scope for redux-observable? If so, how would you solve this problem?

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

I am thinking about having the new score as a property in the GOAL_UP action. Something like this { type:"GOAL_UP", team:"red", newScore:8 }. But somehow this feels wrong. I also have two physical buttons on the fusball-table that are connected with web sockets, which dispatch the GOAL_UP action. Since they are not triggered from my ui they don't know about the state.

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

I could also think of dispatching the GAME_WON action in the render function of my ui component if the score of either team is 8. But that feels even more wrong :)

欢迎输入，谢谢

推荐答案

查看 访问商店的状态 redux-observable 文档的部分.

Check out the Accessing the Store's State section of the redux-observable docs.

它描述了除了动作流(第一个参数)之外，您的史诗如何接收商店状态流(第二个参数).

It describes how, in addition to a stream of actions (the first argument), your epics receive a stream of store states (second argument).

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

Use state$.value to synchronously access the current state. This value will contain your entire redux store state.

请注意，当一个动作到达你的史诗时，它已经已经通过你的减速器运行(和任何状态更新).

Note that by the time an action reaches your epic it has already be run through your reducers (and any state updated).

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 来实现这一点——这有点矫枉过正.当然，如果这只是为了让你的脚湿透和学习，无论如何！只是不想让您认为您需要这些简单事物的复杂抽象.

---

I would also add that as described, I don't think you need redux-observable or even redux for this--it's rather overkill. Of course, if this is just to get your feet wet and learn, by all means! Just don't want you to think you need these complex abstractions for simple things.

这篇关于从 redux-observable 史诗中访问状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！