Должен ли я использовать модель / класс для безопасного доступа к свойствам объекта состояния?

Question

Исходя из мира программирования iOS / swift, я нахожу общий способ доступа к определенным свойствам состояния слишком универсальным, и я хотел бы узнать ваше мнение по этому вопросу

Учитывая следующее состояние Redux (котороеможет быть уже слишком вложенным):

lights: {
    room1: {
        items: {
            1: {
                rgb: false,
                isOn: false,
                value: 50,
                color: -1,
                title: "Desk light"
            },
            2: {
                rgb: false,
                isOn: false,
                value: 50,
                color: -1,
                title: "Groupe 2"
            }
        }
    }
}

и следующий селектор:

export const getLight = (state, roomId, itemId) =>
state.lights[roomId].items[itemId];

, затем в компоненте я сопоставляю stateToProps со следующим:

function mapStateToProps(state, ownProps) {
    return {
        light: getLight(state, ownProps.roomId, ownProps.itemId)
    };
}

это вопрос (наконец).

Я могу получить доступ к различным свойствам света, например, через this.props.light.isOn;но часть isOn не обеспечивает какую-либо проверку строки, и в случае, если я изменю состояние, мне придется обновить все компоненты, которые зависят от свойства.

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

function mapStateToProps(state, ownProps) {
    return {
        light: Light(getLight(state, ownProps.roomId, ownProps.itemId))
    };
}

Это хорошая практика в React / Redux или есть что-то еще, что используется в таком случае?

И последнее,У меня также есть общее действие updateLight, для которого я предоставляю словарь для ключа, который я хочу обновить.Еще раз, я должен обратить внимание на ключи словаря, чтобы они точно совпадали с ключами состояния.Я не понимаю, как класс Light мог бы помочь мне ... за исключением того, что я перечислю ключи в другом перечислении или что-то, что затем приведет к большому количеству шаблонов.

Спасибо!

Answer 1

Должен ли я использовать модель / класс для безопасного доступа к свойствам объекта состояния?

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

НЕПРОВЕРЕННЫЙ КОД:

// Reducer.js

// Changes for the state data shape
const initialState = {
  rooms: {
    /*
    room1: {
      items: [
        {
          id: 0, // ID
          rgb: false,
          isOn: false,
          value: 50,
          color: -1,
          title: "Desk light",
          type: "Light", // additional attribute for Item
        },
      ]
    }
    */
  }
};

export const rooms = (state=initialState, action) => {
  switch(action.type) {
    case UPDATE_ITEM:
      const items = [...state.rooms[action.roomId].items];
      let updateItem = items.find(item => item.id === action.itemId);
      // do something with updatedItem
      return {
        ...state.rooms,
        [action.roomId]: {
          items: items.map(item => (
            item.id === action.itemId ? updatedItem : item
          )),
        }
      }
    default:
      return state;
  }
}

// YourComponent.js

function mapStateToProps = (state, ownProps) => {
  const { rooms } = state;
  return {
    rooms,
  };
}

function mapDispatchtoProps = dispatch => {
  return {
    updateItem: (item) => {
      // dispatches UPDATE_ITEM action
      // handled by reducer
      dispatch(updateItem(item));
    }
  };
}

render() {
  const { rooms, updateItem } = this.props;
  return (
    { Object.values(rooms).map(room => (
        <Room key={room.id}>
          { room.items.map(item => (
            <Item key={item.id}
              onChange={() => this.updateItem(item)}
              {...item} // item props
            />
          ))}
        </Room>
    ))}
  );
}

connect(mapStateToProps, mapDispatchToProps)(YourComponent);

Answer 2

Самый простой способ убедиться, что поля в ваших элементах - это использовать классы в вашем хранилище приращений:

class Light {}

lights: {
    room1: {
        items: {
            1: Light
        }
    }
}

Таким образом, когда вы используете селектор getLight, вы получаете экземпляр класса, а не простой объект,Любые изменения в этом классе будут отражены во всех элементах списка.
Если вы хотите глубже контролировать поля и их возможные значения, другие параметры, такие как TypeScript или Flow может быть более подходящим для вас.

В примечании вы упомянули, что магазин может быть слишком вложеннымRedux рекомендует нормализовать ваше хранилище , чтобы сделать его более похожим на реляционную БД.