Вопросы по React'y / Redux'y?

Question

[AlexKindGeek]

Всем привет. Дабы не создавать по 10 раз вопросы, напишу в одном, все что меня интересует.

1. В реальных проектах используете ли вы CRA или сами настраиваете проект (вместе с webpack и т.д)?

2.

Как вы делаете редюсеры?

Например у нас есть 5-10+ екшенов, которые меняют один и тот же редюсер. Это же получится каша, если использовать switch ....

Используете ли вы функцию по типу

createReducer(initialState, mainAction, {
  actionName:  reducerHelper
})

???

Пример

const createQuestionUpdate = (state, action) => {
  switch (action.type) {
    case `${CREATE_QUESTION}_UPDATE`:
      const {data, path } = action.payload;
      const res =  set(state, path, data);
      return Object.assign({}, res);
    default:
      return state;
  }
};

export default createReducer(Object.assign({}, InitialState), CREATE_QUESTION, {
  [`${CREATE_QUESTION}_UPDATE`]               : createQuestionUpdate
});

3.

Как вы хендлите формы?

Например у меня на проекте в одной компоненте есть +-5-7 инпутов, и на каждый из них повешан onChange по типу

Пример

export const onChange = (e, val = "value") => dispatch => {
  let type = e.target.name; //actionType
  let property = e.target.id;
  let value = e.target[val]; // input value
  let { errors } = validate[type]({ [property]: value }); // error object for all related inputs

  dispatch([
    {
      type: type,
      payload: { [property]: value }
    },
    {
      type: `${type}_ERROR`,
      payload: {
        errors: { [property]: get(errors, property) }
      }
    }
  ]);
};

который изменяет нужную филду в нужном стейте. Нормально ли это?

Answer 1

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

1. Сами
2. Пишем ручками (+10 к читаемости, +10 к статическому анализу, -100 к когнитивной нагрузке) Конечно в случае если вы пишите dashboard с кучей моделей, имеет смыл написать CRUD Boilerplate
3. В 99.99% случаев хранение состояния форм в store бессмысленно и неоправданно

Comments

[AlexKindGeek]

Антон Спирин,
1. Спасибо!
2. Можете пожалуйста привести своих редюсеров?
3. Да, но когда у нас много форм, есть 2 выхода

• Использовать redux-form или же formik - минус в том, что приходится тянуть либу
  
• Хранить данные в стейте - минус в том, что если инпутов много, стейт будет большой и не очень читабельным.
  

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

AlexKindGeek,

типичный небольшой редьюсер

import { fromJS } from 'immutable';
import { LOGOUT } from "../constants/auth";
import {
  GET_SETTINGS,
  GET_SETTINGS_SUCCEEDED,
  GET_SETTINGS_FAILED,
  PUT_SETTINGS_SUCCEEDED
} from "../constants/settings";

const initState = fromJS({
  isFetching: false,
  isError: false,
  data: null,
});

export default function settings(state = initState, action) {
  const { type, payload } = action;

  switch (type) {
    case LOGOUT:
      return initState;
    case GET_SETTINGS:
      return state.set('isFetching', true);
    case GET_SETTINGS_SUCCEEDED:
      return state.set('data', fromJS(payload)).set('isFetching', false);
    case PUT_SETTINGS_SUCCEEDED:
      return state.merge({ data: payload });
    case GET_SETTINGS_FAILED:
      return state.set('isFetching', false).set('isError', true);
    default:
      return state;
  }
}

Когда много форм лично я не использую ни formik, ни redux-form.

state = {
  firstName: '',
  lastName: '',
  sex: '',
  addressLine1: '',
  addressLine2: '',
  country: '',
  zipIndex: '',
  errors: {},
};

Не вижу ничего не читаемого, даже если бы полей было еще больше.
Если получаете состояние по props и не знаете какие будут поля можно делать так:
state = computeDerivedStateOnProps(this.props);
и в вызове computeDerivedStateOnProps мапите данные в состояние.

Если вам удобно работать с этими библиотеками и они подходят под ваши требования, то почему бы и нет.
Но самому хранить состояние форм в redux не стоит.

[AlexKindGeek]

Антон Спирин, Большое спасибо за ответ. Удачи вам!)

[AlexKindGeek]

Антон Спирин, Прошу прощение что так много вопросов. Еще один меня интересует.
Как вы проводите валидацию инпутов??
Самописная функция validate?

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

AlexKindGeek, да. В зависимости от требований реализации бывают очень разные.
Например, где-то это асинхронные запросы во время ввода с проверкой свободного имени пользователя. А где-то валидация на onBlur. Где-то надо еще кнопку Submit валидировать, чтобы все красиво было.
Думаю вам стоит попробовать на каком-нибудь codesandbox написать форму с конкретными требованиями своими силами и параллельно с использованием formik или redux-form ну и использовать тот вариант который больше понравится/подойдет.

[AlexKindGeek]

Антон Спирин, Спасибо!