複数の成分用の単一レデューサーの作成

Question

2つのクラス成分と、両方の成分で使用される単一のレデューサーをmapStateToPropsと書きました。

コンポーネント減速DEF：DEF

import notify from '../global/reducers/notifyReducer'; 

const compAReducer = combineReducers({ 
    notify 
}); 

export default compAReducer; 

コンポーネントBの減速：

import notify from '../global/reducers/notifyReducer'; 

const compBReducer = combineReducers({ 
    notify 
}); 

export default compBReducer; 

が減速は次のようになります。

import * as types from '../../../actions/actionTypes'; 

export default function notifyReducer(state = {}, action) { 
    switch (action.type) { 
     case types.NOTIFY_SUCCESS: 
     case types.NOTIFY_FAILURE: 
      return action.notify; 
     case types.NOTIFY_NULL: 
      return {}; 
     default: 
      return state; 
    } 
} 

問題は、そのときcompnentのAディスパッチですアクション、それはコンポーネントB、副詞の状態に影響します。

これは私が探している動作ではありません。私は、コンポーネントが同じロジックを使用するが、別の "状態プロパティ"を保持することを望む。 異なる「通知」インスタンス。

還元剤を複製することはできますか？

ありがとうございます。私はまだReact-Reduxを学んでいます。

Answer 1

各コンポーネントにIDを付けることで、状態の名前空間を割り当てることができます。

export function notifyReducer(state = {}, action) { 
    switch (action.type) { 
     case types.NOTIFY_SUCCESS: 
     case types.NOTIFY_FAILURE: 
      return { ...state, [action.id]: action.notify }; 
     case types.NOTIFY_NULL: 
      return { ...state, [action.id]: {} }; 
     default: 
      return state; 
    } 
} 

次にあなたがする必要があるすべては、あなたのコンポーネントがディスパッチ各アクションでidプロパティが含まれていることを確認しています。

アプリケーションによっては、コンポーネントの各インスタンスに関連付けられた論理IDが既に存在する場合があります。そうでなければ、コンストラクタ内でランダムなIDを生成できます。

import uid from 'uid'; 

constructor() { 
    super(this); 
    this.id = uid(); 
} 

その後、あなたの行動のクリエイターの各パラメータとしてidを受け入れる必要があります。

function notifyFailure(id, notify) { 
    return { id, type: types.NOTIFY_FAILURE, notify } 
} 

最後に、mapDispatchToPropsのIDを渡す必要があります。

function mapDispatchToProps(dispatch) { 
    return { 
    notifyFailure(id, notify) { 
     dispatch(notifyFailure(id, notify)); 
    } 
    } 
} 

ご希望の場合は、bindActionCreatorsをご利用ください。

Answer 2

は、最終的に高次の減速が近づいて行きました：

You can read about it here

インポート* ../../「から型として../ actions/actionTypes ';

export default function createNotifyReducerWithPageType(pageType = '') { 
    return function notifyReducer(state = '', action) { 
     switch (action.type) { 
      case types.NOTIFY_SUCCESS + `_${pageType}`: 
      case types.NOTIFY_FAILURE + `_${pageType}`: 
       return action.notify; 
      case types.NOTIFY_NULL: 
       return {}; 
      default: 
       return state; 
     } 
    } 
} 

アクションクリエイター：

export function notifySuccess(notify, type) { 
    return { 
     type: types.NOTIFY_SUCCESS + type, 
     notify 
    } 
} 

export function notifyFailure(notify, type) { 
    return { 
     type: types.NOTIFY_FAILURE + type, 
     notify 
    } 
} 

レデューサー：

import createNotifyReducerWithPageType from '../global/reducers/notifyReducer'; 

const compA = combineReducers({ 
    notify: createNotifyReducerWithPageType('_compA') 
}); 

export default compA; 

と第二1：

import createNotifyReducerWithPageType from '../global/reducers/notifyReducer'; 

const compB = combineReducers({ 
    notify: createNotifyReducerWithPageType('_compB') 
}); 

export default compB; 

だから今州の構造のように、同じですアクションクリエイターがディレクティブを世話する行動をとる。