コール私の減速でReduxのリデューサ

Question

内部アクションコードは次のとおりです。

import {ADD_FILTER, REMOVE_FILTER} from "../../../../actions/types"; 

const removeFilter = (state, name) => { 
    return state.filter(f => f.name !== name); 
}; 

export default function addRemoveFilterReducer(state = [], action) { 
    switch (action.type) { 

     case ADD_FILTER: 
      let nState = state; 

      if(state.some(i => i.name === action.searchFilter.name)) 
       nState = removeFilter(state, action.searchFilter.name); 

      return [...nState, {name: action.searchFilter.name, values: [action.searchFilter.values]}]; 

      //Call another action  

     case REMOVE_FILTER: 
      return removeFilter(state, action.searchFilter.name); 

     default: 
      return state; 
    } 
} 

私は1つのコンポーネントショールームを持ち、ショールーム内で、私は検索コンポーネントとコンテンツ構成要素を持っています。

検索コンポーネント内でフィルタリングを処理し、このリデューサで処理されるアクションをディスパッチします。

フィルタを追加した後、すべてのフィルタでアクションをディスパッチしたいと思います。どうやってやるの？

このアクションは、検索基準に一致する車だけを返却してコンテンツコンポーネントに表示するリデューサーで処理されます。

私はあなたが何を言いたいのか理解していただければ幸いです。

このアプローチはまったく良いですか？

Answer 1

アクションの呼び出しは、おそらく副作用操作です。レデューサーは関数型プログラミングの原則に従わなければならないので、私はそれが何らかのアクションを引き起こすべきではないと主張するだろう。

ユースケースを解決するには、引き続き減速機の変更を引き起こした場所から2つのアクションを実行できます。我々は時々我々のアプリでそれをやっている。たとえば、コンポーネントは2つのアクションをトリガーすることができ、アクションは2つのReduxストア更新を起動できます。

Answer 2

これにはredux-thunkを使用することをお勧めします。

フィルタを追加する場合と検索を行う場合の2つのアクションがあります。 addFilterAndMakeSearchサンクは、これらのアクションを順番に呼び出す責任があります。このようにして、減量者からの行動を派遣する必要はありません。この作業を行うためには

// Thunk 
function addFilterAndMakeSearch(searchFilter) { 
    return dispatch => { 
    dispatch(addFilter(searchFilter); 
    dispatch(makeSearch()); 
    } 
} 

// Action Creator One 
function addFilter(searchFilter) { 
    return { 
    type: 'ADD_FILTER', 
    payload: searchFilter, 
    }; 
} 

// Action Creator Two 
function makeSearch() { 
    return { 
    type: 'MAKE_SEARCH', 
    }; 
} 

、あなたはあなたのonSubmitハンドラとしてaddFilterAndMakeSearchを使用する必要があります。