0

введите сюда описание изображения

Доброго времени суток. Есть небольшой проект на React/Redux, очень интересует правильная архитектура.

В redux store хранится двумерный массив, который предварительно генерируется по клику. В контейнере массив перебирается и отображается на странице как таблица. Для некоторых значений в этой таблице по клику должно вызываться popup окно рядом с ячейкой, на которую кликнули. Так как я слабо освоил Redux начинаются сложности.

1) Должен ли я создать отделенный компонент для popup или добавить его в существующий container?

2) Как и куда нужно передавать координаты всплывающего окна, чтобы оно всплывало непосредственно рядом с кликнутой ячейкой.

3) Где должен храниться код для генерации массива в reduce или в actionCreator, а так же код который меняет state?

1 ответ 1

1

Не понятно зачем вам тут контейнер и что он из себя представляет. Если это просто компонент внутри App, то я бы изобразил его внутри жёлтого прямоугольника (на схеме). Что касается архитектуры,

1) Должен ли я создать отделенный компонент для popup или добавить его в существующий container?

Это не важно, вы можете вынести код/верстку вынести в отдельную функцию renderPopup() или в отдельный компонент <Popup />, сути это не меняет - как вам удобнее с точки зрения расположения модулей. К редаксу это отношения не имеет.

2) Как и куда нужно передавать координаты всплывающего окна, чтобы оно всплывало непосредственно рядом с кликнутой ячейкой.

Этого и не потребуется (заморачиваться с координатами). Если вы так отрисуете компоненты, что popup-ы будут внутри ячеек, то добавив ячейке position: relative, а popup-у position: absolute, всё будет показываться где надо.

3) Где должен храниться код для генерации массива в reduce или в actionCreator, а так же код который меняет state?

Это зависит от того, на каком этапе вам нужно изменять данные. Если у вас есть запрос к серверу (например), и перед отправкой этого запроса нужно изменить какие-то данные - можно сделать это в экшене. Обычно же в экшене вообще ничего не вычисляется, я про это уже писал.

Если вам нужно поменять данные в redux-сторе (например, после получения данных от сервера), то можно это сделать в редьюсере (особенно, если нужен доступ к объекту стора).

Если вам нужно менять state, то делается это только из компонента через метод setState компонента. Другое дело, нужен ли вам стейт, если вы используете redux, иногда только его и достаточно (но не всегда).

1
  • Да спасибо, проект действительно слишком прост, чтобы использовать redux, просто хотелось немного прощупать его. 20 мар 2018 в 18:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.