JSON:API, React и Redux

• 1 млн посетителей в день
• 30 млн резюме
• 2 млн приглашений на собеседования в месяц

• 300 тыс строк кода
• 1200 компонентов
• 1000 из них подключены к стору
• 2700 компонентов на странице поиска вакансий

...ваших программистов надо уволить, переход на поиск с главной занимает 4 секунды!

Вбиваю запрос в поиск, а подсказки тормозят!

ЛАГАЕТ

• id - ID сущности
• type - тип сущности
• attributes - произвольные поля
• relationships - связанные сущности

{
  "comment": {
    "1": {
      "id": "1",
      "type": "comment",
      "attributes": {
        "body": "diffraction never killed nobody"
      },
      "relationships": {
        "author": {
          "data": { "type": "author", "id": "1" }
        }
      }
    }
  }
}

const comment = getEntityById(state, { id, type: 'comment' });
 
console.log(
  comment.author.name,
  comment.body,
  comment.likes.count,
);
// "Fraunhoffer"  "diffraction never killed nobody"  7

export function entities(state = {}, action) {
  const { id, type, ...entity } = action.payload;
 
  switch (action.type) {
    case 'ADD_ENTITY': return {
      ...state,
      [type]: {
        ...state[type],
        [id]: { ...entity, id, type },
      },
    }
  }
}

const getEntityById = createSelector(
  ({ entities }) => entities,
  (_, { type }) => type,
  (_, { id }) => id,
  (entities, type, id) => denormalizeEntity(entities, type, id),
);

{
  "id": "1",
  "type": "likesCounter",
  "$$cacheKey": genUuid()
}

{
  "id": "1",
  "type": "likesCounter",
  "$$cacheKey": "6fbeb9e1-5ef4-4a0c-8acc-fa8f4a843adf",
  "$$dependants": ["comment@1"]
}

const mapStateToProps = (state, { authorId }) => {
  const comments = getAllEntitiesOfType(state, { type: 'comment' });
 
  const authorComments = comments.filter(({ author }) => {
    return author.id === authorId;
  });
 
  return { authorComments };
};

• Следит за тем, какие данные использует компонент
• Обновляет компоненты только если эти данные поменялись
• mobx@3.x.x не работает в IE11 😔