Как можно улучшить High Order Reducer?

Question

[cester]

Добрый день! Скажите пожалуйста как можно улучшить этот High Order Reducer?

const funcReducer = (type, initState, name, payload) =>
  (state = initState, action = {}) => {
    switch (action.type) {
      case type[0]:
        return {
          [name]: {
            ...state[name],
            data: payload ? action.payload[payload] : state[name].data,
          },
        };
      case type[1]:
        return {
          [name]: {
            ...state[name],
            isOpen: true,
            data: !action.payload ? state[name].data : action.payload[payload],
          },
        };
      case type[2]:
        return {
          [name]: {
            ...state[name],
            isOpen: false,
            error: '',
          },
        };
      case type[3]:
        return {
          [name]: {
            ...state[name],
            isLoading: true,
            error: '',
          },
        };
      default:
        return state;
    }
  };
export default funcReducer ;

const types = [
  '',
  'OPEN_MODAL',
  'CLOSE_MODAL',
  'DELETE_REQUEST',
];

export const deleteItemReducer = funcReducer(types, initialState, 'delete', 'item');

Проблема в том что, например

data: !action.payload ? state[name].data : action.payload[payload]

, не везде нужна.
Буду благодарен за любую помощь!

Comments

[Антон Спирин]

Вам же уже объясняли, что это не HOR, а boilerplate генератор.
Если хотите улучшить, то смотрите в сторону bolierplate https://github.com/markerikson/redux-ecosystem-lin...

[cester]

Антон Спирин, Что тогда HOR?

[Антон Спирин]

cester, хороший пример из официальной документации redux:

function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}

function createNamedWrapperReducer(reducerFunction, reducerName) {
    return (state, action) => {
        const {name} = action;
        const isInitializationCall = state === undefined;
        if(name !== reducerName && !isInitializationCall) return state;

        return reducerFunction(state, action);    
    }
}

const rootReducer = combineReducers({
    counterA : createNamedWrapperReducer(counter, 'A'),
    counterB : createNamedWrapperReducer(counter, 'B'),
    counterC : createNamedWrapperReducer(counter, 'C'),
});

[cester]

Антон Спирин, это самый простой пример с документации.
Что делать с большими редюсерами?

[Антон Спирин]

cester, что хотите то и делайте. Нет правильного рецепта. Если хотите забоилерплейтить код, то продолжайте ресерч в сторону boilerplate
Как я приводил пример в прошлом вашем похожем вопросе, интерфейс при желании можно свести к чему-то вроде:

const {
  reducer,
  actions,
  selectors,
  api,
  actionTypes,
} = generateCrudBoilerplate(
  'products',
  {
    getList: () => `/api/products`,
    getOne: id => `/api/product/${id}`,
    add: payload => `/api/product/`,
    remove: id => `/api/product/${id}`,
    edit: (id, payload) => `/api/product/${id)`,
  }
);

Такое надо проектировать исходя из ваших задач.
Лично я в простых вариантах предпочитаю копипасту боилерплейту. Так как такой код проще читается, изменяется и масштабируется. В сложных вариантах вроде CRUD, лучше написать бойлерплейт.

В аббревиатуре HOR, ключевые слова high ordered, что подразумевает сущность оборачивающую другую сущность и задающую последней дополнительное поведение, другими словами декоратор. А то что вы пытаетесь сделать это boilerplate, генератор по заданому шаблону.

Answer 1

[Mikhail Osher]

На моей практике такие штуки только запутывают код. If you ask me, как говорится, я бы это расписал на несколько редьюсеров сам. Проще читать, проще поддерживать.
Я считаю, что код надо писать для людей, а не для машины.

Comments

[Иван]

Как новичок,даже понять не могу,зачем такая лапша,если есть combineReducers,для чего HOR используют?

[Mikhail Osher]

Иван, не хочу никого обидеть, но я это вижу как "посмотрите, как я научился DRYить код".
DRY - это хорошо, но без фанатизма.

[cester]

Mikhail Osher, в моем коде есть много редюсеров, почти одинаковых.
что плохого, что я написал эту функцию и выбросил 1000 строк кода?

Answer 2

[davidnum95]

Все зависит от того, чего вы хотели добиться этим кодом.

Comments

[cester]

Этот код заменяет мне много редюсеров, я вызываю одну функцию вместо написания всего редюсера, но есть лишние свойства (в этом и проблема)