Это хорошая практика, чтобы написать вложенный Switch Case в редукторах - PullRequest
Новая
       18

Это хорошая практика, чтобы написать вложенный Switch Case в редукторах

0 голосов
/ 30 апреля 2019

Я новичок в приложении Reaction-Redux. Мои действия состоят из небольшой иерархии, подобной этой: 

{
    type:'FITLER',
    filterType: 'FILTER_COUNTRY',
    payload: countries
}

В моем редукторе, среди других функций, я пишу один из моих редукторов как: 

function FilterValue(state, action){
    switch(action.type){
        CASE FILTER:break;
        CASE FILTER_CLEAR_ALL:break;
        default:
    }
}

Мне было интересно, должен ли я делать вложенные операторы switch для моего типичного случая, например: 

function FilterValue(state, action){
    switch(action.type){
        CASE FILTER:
             switch(action.filterType){
                  CASE FILTER_COUNTRY:break;
                  CASE FILTER_REGION: break;
                  default:
             }
        CASE FILTER_CLEAR_ALL:
        default:
    }
}

Я просмотрел эти статьи и ТАК вопросы, но никто из них не ответил об этой практике программирования.

Литералы объектов в сравнении с регистром коммутации

Switch-Case - литералы объектов

Редукторы редукторов против комбинированных редукторов

РЕДАКТИРОВАТЬ: я уже использую ReduReducers и промежуточное программное обеспечение Thunk. Мой вопрос касается только вложенного коммутатора.

1 Ответ

0 голосов
/ 30 апреля 2019

Редукторы вложенности:

Вложенные редукторы - плохая практика. Вы хотите, чтобы ваши редукторы (и срезы состояния) были как можно более плоскими. Следовательно, разбиение даст лучший опыт разработки с точки зрения обновления срезов вашего состояния. Проверьте ОбъединитьСредукторы () .

О корпусе выключателя:

Рассмотрите возможность рефакторинга вашего редуктора от формирования переключателя 

export function todos(state = [], action) {
  switch (action.type) {
    case ActionTypes.ADD_TODO:
      const text = action.text.trim()
      return [...state, text]
    default:
      return state
  }
}

К формированию хеш-таблицы 

export const todos = createReducer([], {
  [ActionTypes.ADD_TODO]: (state, action) => {
    const text = action.text.trim()
    return [...state, text]
  }
})

Вы можете написать следующий помощник для выполнения этого: 

function createReducer(initialState, handlers) {
  return function reducer(state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action)
    } else {
      return state
    }
  }
}

Основные преимущества использования этого подхода:

  1. Простой, независимо от того, используете вы его или нет.
  2. не беспокойтесь о дублировании имени переменной
  3. может использовать действие уничтожения и состояние
  4. может использовать синтаксис функции стрелки ES6
  5. hashTable быстрее, чем switch при большом количестве дел
  6. не нужно раздражать перерыв и по умолчанию

Ссылка:

https://redux.js.org/recipes/reducing-boilerplate#generating-reducers https://github.com/reduxjs/redux/issues/883

...