7

私は redux を使って小さな fusball-manager を構築しています。基本的には、両方のチームのスコアとそれらをインクリメントするいくつかのボタンを表示するページです。{ type:"GOAL_UP", team:"red" }レデューサーが状態の対応する値 (スコア) を変更するようなアクションがあります。

GOAL_UPここで、2 つのチームのいずれかがゲームに勝った場合にチェックが発生するたびに、エピックを追加したいと考えています。GAME_WONチームのスコアが 8 に達したら、アクションをディスパッチしてもらいたいです。私の問題は、各チームのスコアを知るために状態にアクセスする必要があることです。エピック内から状態にアクセスする方法が見つかりません。

redux-observable の範囲外の状態にアクセスしていますか? もしそうなら、あなたはこの問題をどのように解決しますか？

GOAL_UP新しいスコアをアクションのプロパティとして持つことを考えています。このようなもの{ type:"GOAL_UP", team:"red", newScore:8 }。しかし、なんとなくこれは間違っているように感じます。また、fusball-table には、GOAL_UPアクションをディスパッチする Web ソケットに接続された 2 つの物理ボタンがあります。それらは私のUIからトリガーされていないため、状態について知りません。

どちらかのチームのスコアが 8 の場合、UI コンポーネントの render 関数でアクションをディスパッチすることも考えGAME_WONられます。しかし、それはさらに間違っているように感じます :)

入力は大歓迎です、ありがとう

4

1 に答える 1

17

redux-observable docsの Accessing the Store's Stateセクションを確認してください。

アクションのストリーム (最初の引数) に加えて、エピックがストア状態のストリーム (2 番目の引数) を受け取る方法について説明します。

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さえも必要ないと思います-それはかなりやり過ぎです。もちろん、これがただ足を濡らして学ぶだけなら、ぜひ！単純なことにこれらの複雑な抽象化が必要だと思われたくないだけです。

于 2016-12-01T20:16:24.807 に答える