Как обновить два значения в двух разных редукторах одновременно в операциях Redux/Atomic

Question

Описание проекта: У меня есть календарь, такой как Календарь Google, где у вас есть кнопки увеличения и увеличения, а также датпикер, где вы можете нажмите любую дату, чтобы переместить календарь на эту дату.

Дизайн магазина: У меня есть редуктор фильтров, где я сохраняю диапазон текущего календаря (например {start: '01/01/2016 ', end: '01/01/2017'}) , а также редуктор UI, где я сохранить текущий уровень масштабирования (один год/месяц/неделю)

Сценарий: Когда кто-то на zoomLevel = «год» и нажимает на дату на DatePicker, мне нужно перейти на zoomLevel = 'week', а также изменить диапазон.

Проблема: Как обновить магазин как с увеличением, так и с диапазоном, в то же время? Если я этого не сделаю, мой календарь прерывается из-за несогласованности, потому что когда я обновляю первое значение, пользовательский интерфейс отображает все.

UI Редуктор как пример универсального редуктора:

import * as actions from './action-types' 
import { omit } from 'lodash' 
import initialState from './initial-state' 
export * from './actions' 
export * from './selectors' 

// TODO: Eval. Tendria mas sentido hacer el switch por dominio? 
export default function ui(state = initialState, {type, meta: {domain = 'general'} = {}, payload: {key, value} = {}}) { 
    switch (type) { 
    case actions.SET: 
    return { 
     ...state, 
     [domain]: { 
     ...state[domain] || {}, 
     [key]: value 
     } 
    } 
    case actions.TOGGLE: 
    return { 
     ...state, 
     [domain]: { 
     ...state[domain] || {}, 
     [key]: !!!(state[domain] || {})[key] 
     } 
    } 
    case actions.TOGGLE_IN_ARRAY: 
    // No sirve para objetos 
    const index = state[domain] && state[domain][key] ? state[domain][key].indexOf(value) : -1 
    return index === -1 ? 
     { 
     ...state, 
     [domain]: { 
      ...state[domain] || {}, 
      [key]: [ 
      value, 
      ...state[domain][key] 
      ] 
     } 
     } : { 
     ...state, 
     [domain]: { 
      ...state[domain], 
      [key]: [ 
      ...state[domain][key].slice(0, index), 
      ...state[domain][key].slice(index + 1) 
      ] 
     } 
     } 
    case actions.DELETE: 
    return { 
     ...state, 
     [domain]: omit(state[domain], key) 
    } 
    case actions.CLEAR_DOMAIN: 
    return { 
     ...state, 
     [domain]: initialState[domain] 
    } 
    case actions.RESET_UI: 
    return { 
     ...initialState 
    } 
    default: 
    return state 
    } 
} 

Answer 1

Отправляется действия будут направлены все редукторами в корневой редуктор, который в свою очередь, передавались дочерним переходниками (в зависимости от реализации редуктора).

Таким образом, если ваш корневой редуктор выглядит следующим образом:

export default combineReducers({ 
    filters, 
    ui, 
}); 

Вы можете ответить на такие же действия, как это в каждом редукторе:

function filters(state, action) { 
    case CLICK_ON_DATE: 
    return { 
     ...state, 
     start: ..., 
     end: ..., 
    }; 
    ... 
} 


function ui(state, action) { 
    case CLICK_ON_DATE: 
    return { 
     ...state, 
     zoomLevel: 'week', 
    }; 
    ... 
}