Как вывести по клику на результат поиска полную информацию о выбранном объекте?

Question

[Леонид Марков]

Есть база данных клиентов в виде json файла. Требуется создать форму поиска по этой базе с выводом карточек с краткой информацией о найденных клиентах. Похожая реализация - https://react.semantic-ui.com/modules/search/#type...
По клику на одну из карточек с краткой информацией должна выводиться карточка с полной информацией (из этой же базы) о выбранном клиенте. При этом остальные результаты поиска исчезают, а остается лишь форма поиска и карточка с полной информацией о выбранном клиенте.
Для реализации использовать стек React/Redux и желательно - библиотеку Reselect
Я уже создал рабочую форму поиска с выводом краткой инфы, но никак не получается реализовать вторую фазу - вывод полной инфы о клиенте по клику на результат поиска.
Вот пока что текущий результат моих трудов https://codesandbox.io/s/4qxlnlpqww

Comments

[Леонид Марков]

Задача решена. Кому интересно - решение в песочнице по ссылке в вопросе

Answer 1

[Сергей Сунцев]

Не увидел в вашей реализации redux.

Вам нужно в store добавить два поля: список клиентов и активного клиента.
Пока у вас активный клиент равен null, то показываем список клиентов.
При клике на клиента добавляем в поле "активный клиент" объект из списка всех клиентов и отображаем по нему информацию.

Соответственно поля список клиентов и активный клиент держим в селекторах, для этого используем Reselect

Comments

[Леонид Марков]

Просто я пока что решил набросать рабочую реализацию на чистом реакте, а потом перевести все на ридакс. И еще проблема в том, что я нигде не могу найти реализацию похожей задачи на ридаксе, вот и не знаю как спланировать алгоритм решения/
И еще - из вашего ответа я не понял, в каком виде добавлять указанные вами поля в store. Это что - импортировать содержимое data.json в initialState в редьюсере, а активного клиента также задать значением null в initialState? не могли бы вы в общих чертах набросать вид редьюсера?

[Сергей Сунцев]

Да, примерно так и можно реализовать.

import {Record} from 'immutable'

export const ReducerRecord = Record({
  users: userList.json,
  activeUser: null
})

export default function reducer(state = new ReducerRecord(), action) {
  const {type, payload} = action
  
  switch (type) {
    case SET_ACTIVE_USER:
      return state.set('activeUser', payload)
    default:
      return state
  }
}

[Леонид Марков]

Сергей Сунцев, Как-то вы все сложно завернули с immutable.js. Я пока что не знаком с данной библиотекой и потому возникли сложности с пониманием особенностей ее применения.
И потому непонятно, как этот immutable скомбинировать с reselect-ом
И еще непонятно каким образом при клике на клиента добавлять в поле "активный клиент" объект из списка всех клиентов и отображать по нему инфу? Это для меня и был основной "головняк", из-за чего я и обратился за помощью..
И еще я никак не разберусь, как вычленить из всего списка именно "кликнутого" клиента. И где это делать - в mapStateToProps или в селекторе? Или вообще как-то через пропсы в отдельный компонент?

[Сергей Сунцев]

Это просто пример, без библиотеки будет

export const initialState = {
  users: userList.json,
  activeUser: null
}

export default function userReducer = (state = initialState, action) {
const {type, payload} = action
  
  switch (type) {
    case SET_ACTIVE_USER:
      return {...state, activeUser: payload}
    default:
      return state
  }
}

[Леонид Марков]

Сергей Сунцев, Огромное спасибо за уже оказанную помощь и все же - могли бы вы как-то сориентировать КАК ИМЕННО вычленить из общего списка "кликнутого" клиента? В общих чертах я понимаю, что нужно создать новый массив, куда пушить данные "кликнутого" юзера, только вот как это практически реализуется - никак не пойму.
И с селекторами я что-то запутался - почему-то они не хотят доставать данные из стора. Может глянете на код, что именно там не так, из-за чего выбивает ошибки?

[Сергей Сунцев]

Во первых. Вы в экшн криэйтере вместо выбранного пользователя отправляете пустую строку

export const setActiveUser = clientsList => {
  return {
    type: SET_ACTIVE_USER,
    clientsList: ""
  };
};

а надо

export const setActiveUser = activeClient => {
  return {
    type: SET_ACTIVE_USER,
    payload: activeClient
  };
};

Во вторых Если вы хотите так же получать список пользователей не из мокапов, то по умолчанию должен быть пустой массив

export const initialState = {
  users: [],
  activeUser: null,
  filter: ""
};

В третьих добавьте для заполнения экшн криэйтер и вызывайте его при инициализации приложения.

export const getUsers = clientsList => {
  return {
    type: GET_USERS,
    clientsList: clientsList
  };
};

В четвертых. При клике отправляете в setActiveUser целиком item.

В пятых. В компонент FullData не нужно прокидывать никаких данных. подключайте компонент к стору и получайте от туда activeUser.

Предлагаю сначала разобраться с редаксом, а потом уже добавить reselect.
Селекторы относятся к модели данных. Поэтому их обычно из компонентов выносят.
Для упрощения архитектуры, что бы вы в ней не запутывались - советую пользоваться Duсks архитектурой
стятья с хабра

[Леонид Марков]

Сергей Сунцев, Спасибо большое за развернутый ответ - сразу многое прояснилось, правда, проявились и новые вопросы.
С вашего ответа я не понял КАК ИМЕННО получать список пользователей. Если не через импорт в компоненте App.js, то как еще? Используя redux-thunk фетчить данные в экшн-криэйтере или как-то по-другому их пробрасывать в стор? Если таки фетчить, то где размещать data.json - в папке src, где он и сейчас находится, или в public выносить? А если так, то как должен выглядеть урл запроса?
И как ориентировочно реализовать "в четвертых"? Через санку в экшн-криэйтере post-запросом или через setState/useSelector/useReducer в самом компоненте? И как этот item выглядит? Перебор массива мэпом, где item - аргумент коллбэка или как-то еще?

[Сергей Сунцев]

Если несколько способов
1) в мидлваре
2) через redux-thunk
3) через redux-saga
4) при инициализации компонента App
способ самый простой, но не самый оптимальный
5) В рамках вашего задания можно просто напрямую отправить в initialState, тогда нам ничего из этого не понадобится.

Про setActiveUser тут вам явно нехватает пониманий работы JS.
У вас уже все есть, просто при клике на какую то из внутренних частей FullData отправляейте целиком объект client, который целесообразно целиком прокидывать, а не размножать на тысчу параметров.

П.С. Если вы выполняете тестовое задание на позицию react разработчика, то наверное лучше не спешить, и подучить реакт и JS по лучше?
Можно к примеру обратиться к репетиторам, или почитать что нибудь про JS/react

[Леонид Марков]

Сергей Сунцев, Эта задача уже больше года назад была моим тестовым заданием и на данный момент это тестовое задание не актуально. Просто я сам для себя захотел его все же сделать, потому что здесь реализуются ряд нужных в дальнейшей разработке вещей и элементы этого задания можно будет в будущем использовать как gists. Именно поэтому я так озадачился и прошу помощи с решением, потому что самостоятельно у меня никак не выходит с этой задачей справиться, а все прочие эксперты, к кому я обращался, ограничиваются лишь общими намеками, которые меня еще больше сбивают с толку. С джаваскриптом я хорошо знаком, да и реакт для меня не в новинку - уже доки прошерстил вдоль и поперек в поисках нужных решений. Так что знания есть, только практики не хватает, а постоянные фейлы с поиском решений лишь деморализуют. А так хотелось бы сделать рывок, а не топтаться на месте...

[Сергей Сунцев]

Если ответ помог, то можете отметить решением.
Согласен с вами, решать задачи это полезно.

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

[Леонид Марков]

Ответ ОДНОЗНАЧНО помог, за что я искренне благодарен, только ведь задачу-то я до сих пор не решил. Как незавершенную задачу отмечать решением? Мне бы хотелось довести ее до конца и оставить здесь ссылку на ее код с решением, чтобы и другим, столкнувшимся с подобными проблемами людям это помогло, чтобы был какой-то референс на рабочее решение, а не черновик с ошибками. Почему нельзя, как на stackoverflow давать ГОТОВЫЕ решения, а не просто намеки и советы общего плана? Ведь не целый же онлайн-шоп, готовый в продашн нужно написать, а всего лишь тренировочное мини-приложение, типа того же TODOLIST-а

[Сергей Сунцев]

Леонид Марков, Не, вы не правильно понимаете суть таких севисов, тут не решают за людей задачи, тут помогают с решением. Для решения задач есть другой сервис https://freelance.habr.com/

[Леонид Марков]

Сергей Сунцев, Так я и не просил написать мне полное решение в виде готового приложения. Я хотел лишь получить помощь в написании непонятных для меня отдельных элементов данного ТРЕНИРОВОЧНОГО (а не коммерческого) мини-приложения. На часть вопросов вы дали достаточно конкретный и развернутый ответ, но в самой главной части вопроса - вывод полной инфы по клику - только общие рекомендации - "При клике отправляете в setActiveUser целиком item". И тут не ясно - каким образом отправить (как это может ориентировочно выглядеть), в каком элементе должен присутствовать данный экшн-крийэтор и каким образом он вызовет рендер компонента с полной информацией. Я там попытался что-то сделать в рамках данной рекомендации, но что-то, видимо, не так, раз выбивает ошибку