レデューサーからユーザーにエラーメッセージを送信する

Question

私はReactとReduxを初めて使いました。ユーザーがイメージのURLを送信してページに表示される簡単なアプリケーションを作成しようとしています。まだアプリケーションのバックエンドは存在しないことに注意してください。

export const addImage = (url) => { 
    return { 
     type: ADD_IMAGE, 
     key: Guid.create().toString(), 
     payload: url 
    } 
} 

イメージを追加すると、ADD_IMAGEタイプのアクションが作成され、結果的にレデューサーが状態を更新します。しかし、URLが既にリストに入っているかどうかも確認します。

switch (action.type) { 
    case ADD_IMAGE: 
    if (state.find(image => image.url === action.payload)) { 
     return state; 
    } else { 
     return(
      [ 
       ...state, 
       {key: action.key, url: action.payload} 
      ] 
     ); 
    } 
    break; 
    default: 
} 

問題はURLが状態に既にあるので、私はポストを拒否したときに、私は、フォームに次のdivにそれを示すことによって、ユーザーにそのメッセージを伝えたいということです。私が読んだことから、私は減速機からのリアクト状態へのアクセスを試みるべきではないと思う（それが可能であれば）...まあ...私はちょうど立ち往生している。私はこれを行う方法についての簡単なガイドを見つけることを試みてきましたが、私は理解できないものは何も見つかりませんでした。データベースを追加した後は、非同期処理の一部としてこれを行う必要がありますが、今のところ私は単純な解決策があるはずです。

Answer 1

あなたは減速機にロジックを導入し始めており、必然的に減速機の範囲外の状態を処理する必要があります。

解決策は、redux-thunk（または同様のパッケージ）のようなミドルウェアパッケージを使用して、還元剤ロジックをthunkに転送することです。これにより、特別な種類のアクションを関数として扱うことができます。つまり、特定のアクション関連のロジックを持つ単純なアクションを拡張することができます。特定の条件下でエラーアクションをディスパッチする必要がある場合の例は、redux-thunkの優れた使用例です。

以下は、減速機のロジックをサンクに引き込む方法の例です。リデューサーとは異なり、サンクは明示的に状態の取得をサポートし、getStateおよびdispatch関数を介して後続のアクションをディスパッチすることに注意してください。セレクタ

上

サンク例

export const addImage = (url) => { 
    return (dispatch, getState) => { 
    const key = Guid.create().toString() 
    dispatch({ 
     type: ADD_IMAGE, 
     key, 
     payload: url 
    }) 
    const state = getState() 

    // you would want to use a `selector` here to locate the existing image 
    // within the state tree 

    const exists = selectors.images.exists(state, url) 

    if (exists) { 
     dispatch(actions.ERROR_IMAGE_EXISTS({key, url})) 
    } 
    } 
} 

ノートあなたは、私は画像が存在するかどうかを決定するためにselectorを使用していていることがわかります。 thunksがディスパッチロジックを配置する場所と同じように、selectorは、状態トラバーサルロジックを配置する場所です。これらは、状態ツリーの一部を返すか、または上記のexists関数のような単純な状態ユーティリティを提供するために使用されます。例えば、reselectのようなパッケージを利用できます。

1. コメントからの質問に

   フォローReduxの中に内蔵されたもののセレクタではありませんか？

   いいえ。セレクタはreduxの上に構築されたアイデアであり、コンセプトはあなたの状態の検索、キャッシング、ロジックの読み込みを行う場所として存在します。これは、時々複雑な状態トラバーサルロジックをあなたのサンクとコンポーネントから抜き出して、きれいで整然としたセレクタのコレクションに抽出します。

2. なぜstate.images.find(i => i.url === url)の代わりにセレクタを使用するのですか？

   セレクタパッケージを使用すると、単なる相性よりもはるかに多くの利点が得られますが、パフォーマンスが大幅に向上します（下の使用例を参照）。

   • セレクタはReduxのは、最小限の可能な状態を保存することができ、得られたデータを計算することができます：ここで

     は人気reselectパッケージから見出しています。

   • セレクタが効率的です。セレクタは、引数の1つが変更されない限り、再計算されません。
   • セレクタは構成可能です。それらは他のセレクタへの入力として使用できます。

3. 私はちょうど例のためにそれを作っているので、なぜ私

   に用はないactions.ERROR_IMAGE_EXISTS(url)作業を行います。ポイントは、サンクの中からアクションをディスパッチできること、アクションを宣言したりアクセスしたりする方法はあなた次第です。私はすべての共有アクションをactionsオブジェクトに集約する傾向があります。そのオブジェクトはimportです。

セレクターの使用例ここで

は、私が反応するコンポーネントに小道具として状態の部分を渡すにセレクタを使用する方法を示し、私の実際のコードの例です：

const mapStateToProps = (state) => ({ 
    model: services.model.selector.getSelected(state), 
    build: services.build.selector.getLastBuild(state), 
    recommendations: services.recommend.selector.getRecommendations(state) 
}) 

これらのセレクタのそれぞれは、状態ツリーの正しい部分を見つけ出し、すぐに使用できるように戻しています。ニースと整頓、あなたがreselectorを使用する場合、非常に効率的です。