1

私は React、React Native、および Redux を初めて使用するので、ここ数日間、これらのニュースの概念の多くに頭を悩ませようとしています。

私が今遭遇した問題の 1 つは、アクション オブジェクトをラップしてレデューサーに渡す前に、Action Creator で新しいデータを計算することです。これには、ステート ツリー内の他のブランチからのデータの一部が必要です。通常、これをどのように解決しますか？グローバル状態ツリーの構造を変更するか、このデータを必要とするコンポーネントにマップしますか?

状態ツリーを考えると:

{
    ListView:{
        dataSource : a ListView.DataSource type
    }
    SubmitForm:{
        title : 'name of title',
        text : 'description'
    }
    isFetchingData: true/false
}

そしておそらく、各ブランチは異なるレデューサーによって処理され、各ブランチのデータは小道具として別々のコンポーネントに渡されます。

シナリオは次のとおりです ( React チュートリアルを Redux を使用して React Native に翻訳しています):

  1. SubmitForm で [Submit] ボタンがクリックされた
  2. --> データが送信されていることをストアに通知するアクションをディスパッチしてから、{title,text} を非同期で取得して API サーバーに送信します。
  3. 成功すると ---> API サーバーから返された dataSource を計算し、結果の dataSource を reducer に渡します (チュートリアルに従って)。また、dataSource を計算するとは、dataSource.cloneWithRows(....) (ここで説明) を意味し、上記のように ListView からの dataSource を必要とします。

したがって、これはステート ツリーの別のブランチからのものであるため、フォーム コンポーネントには dataSource という prop を含めるべきではないと考えました。しかし、それがなければ、目的のデータソースを実現する方法がわかりません。Redux パターンに関する私の理解では、ステート ツリーの構造を変更する (この場合は ListView と SubmitForm をマージする) ことも奇妙です。それで、誰かがこれを理解するのを手伝ってくれますか？ありがとう

4

3 に答える 3

2

みんなありがとう。redux-thunk を使用して最適な解決策を見つけたと思います (実際には redux-thunk を使用して非同期アクションを処理していましたが、API を十分に読み取れませんでした)。基本的に、サンクには getState も挿入されるため、基本的に getState() を呼び出すと、グローバル状態ツリーにアクセスできるようになり、問題が解決するはずです。

const actionCreator = (args) => {
    return (dispatch,getState) => {
        // dispatch action to notify store that data is being sent
        fetch(url)
        .then((response) => response.json())
        .then((resData) => {
            // dispatch action to notify data received
            // compute new data using resData and current dataSource accessed by getState().ListView.dataSource
        })
    }    
}
于 2016-04-14T15:08:54.203 に答える
1

これはよくある質問で、便利なことにRedux FAQに回答があります。

短いバージョン:combineReducersレデューサー機能をドメイン/スライス オブ ステートごとに分割する単純なユース ケースを解決します。それを過ぎて、このアクションを処理するカスタムのトップレベル レデューサー ロジックを追加するか、アクション自体に必要な追加データを含める必要があります。

于 2016-04-11T00:21:03.400 に答える
1

私は以前にこの問題を考えたことがあり、これが方法かもしれないと思います。

例えば。actionA、reducerA、および store の branchA があります。actionB、reducerB、および store の branchB があります。

次に、branchA と branchB を同時に読み取り、それらを変更します。

では、2 つのアクションを定義しましょう。

branchA を変更する actionA(sub-actionA) の 1 つ。もう 1 つの actionB(sub-actionB) で、branchB を変更します。

そして、sub-actionA と sub-actionB を順番に呼び出すトータルアクション(total-action)を定義します。

最後の課題は「サブアクションAのbranchBの読み方」です。

わかりました、ストアのメソッド「getState」を使用できます。store を actionA にインポートし、 store.getState() It を呼び出して store のツリー全体を返します。

于 2016-04-10T08:14:38.643 に答える