Как изменить данные из одной «утки» в другой?

Question

[evg_96]

Есть "утка" cart (отвечает за корзину). В ней обрабатывается добавление товара в корзину, и в состоянии хранится модуль cart, в котором хранятся текущие добавленные товары в корзину.

Есть "утка" catalog (отвечает за каталог товаров). В ней обрабатывается запрос всех товаров из БД (firebase). В состоянии отображается catalog со всеми товарами. У каждого товара есть свойство addedToCart (добавлен ли товар в корзину).

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

Как изменить addedToCart в состоянии на true, при добавлении товара? Как изменить значение в БД понятно, а вот как изменить состояние из одной утки в другой, не ясно. Подскажите пожалуйста. Либо укажите иную логику работы, возможно я вообще не правильно подошел в работе с корзиной.
Добавление товара в корзину в "утке" cart:

// ...
case ADD_PRODUCT_TO_CART_SUCCESS: {
  return state.setIn(["entities", payload.productUid], new ProductRecord(payload.product));
}
// ...

export const addProductToCartSaga = function * (action) {
  const { productUid } = action.payload;

  const productRef = firebase.database().ref(`catalog/${productUid}`);
  const product = yield call([productRef, productRef.once], "value");

  yield put({
    type: ADD_PRODUCT_TO_CART_SUCCESS,
    payload: {
      productUid,
      product: product.val()
    }
  });
};

Answer 1

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

Зачем вообще в товаре свойство addedToCart?
Представьте, что у вас в приложении есть или будет пагинация. Вы перешли вперед-назад и загрузили товары заново. Ключи при этом будут потеряны.

Сделайте селекторы checkIsProductAddedToCartSelector и isProductAddedToCartSelector. Первый пусть возвращает функцию принимающую id товара и возвращающую true если товар найден в store корзины. Второй пусть принимает id товара и возвращает булево значение, если товар найден или не найден в store корзины. Используйте для этого reselect.
И добавляйте их в mapStateToProps в connect.
В списке можно вызывать так:

const ProductsList = ({
  productsList,
  checkIsProductAddedToCart,
}) => (
  <ul>
    {productsList.map(product => (
      <Product
        addedToCart={checkIsProductAddedToCart(product.id)}
        product={product}
      />
    ))}
  </ul>
);

const mapStateToProps(state => ({
  productsList: productListSelector(state),
  checkIsProductAddedToCart: checkIsProductAddedToCartSelector(state),
}));

export default connect(mapStateToProps)(ProductsList);

В детализации так:

const mapStateToProps((state, ownProps) => ({
  isAddedToCart: isProductAddedToCartSelector(state, ownProps),
}));

export default connect(mapStateToProps)(ProductDetails);

Примерные реализации селекторов:

import { createSelector } from 'reselect';

const cartSelector = state => state.cart;

const cartProductsSelector = createSelector(
  cartSelector,
  cart => cart.products,
);

// возвращает функцию, принимающую id, которую можно использовать при построении списков
const checkIsProductAddedToCartSelector = createSelector(
  cartProductsSelector,
  products => id => products.some(product => product.id === id),
);

const productIdSelector = (_, props) => props.product.id;

// возвращает булево значение, важно чтобы в компоненте было свойство product
const isProductAddedToCartSelector = createSelector(
  cartProductsSelector,
  productIdSelector,
  (products, id) => products.some(product => product.id === id),
);

Comments

[evg_96]

Антон Спирин Спасибо за ответ, но честно не совсем понял его.
Попытался интегрировать ваш код в свой, но не пойму суть

productIdSelector = (_, props) => props.product.id;

Что это вообще за функция?
Все что выше этой функции вроде как понятно. Все что ниже не совсем понял...

PS. Вау. Все заработало как надо. Теперь бы разобраться в этом.(

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

evg_96, эта функция принимает props компонента и возвращает id продукта. Но продукт обязательно должен передаваться в компонент. Почитайте про reselect. Там все просто на самом деле.

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

evg_96, вот еще должно внести ясность.

const isProductAddedToCartSelector = createSelector(
  cartProductsSelector, // ( 1 )
  productIdSelector,  // ( 2 )
  (products, id) => products.some(product => product.id === id), // ( 3 )
);

Смотрите мы используем селекторы ( 1 ) и ( 2 ). Селектор ( 1 ) выполняется и возвращает какое-то значение(ну мы то знаем какое) это значение приходит первым аргументом(products) в колбек ( 3 ), значение селектора ( 2 ) приходит вторым аргументом(id). При использовании селектора, мы получаем результат выполнения колбека ( 3 ).

[evg_96]

Антон Спирин, Спасибо большое. Но вот только у меня теперь другая проблема. Корзина то заполняется, но заполняется локально, отображается только в состоянии в cart. После перезагрузки все пропадает. Не подскажите как теперь продукты добавлять не только в состоянии в корзину, но и в firebase пользователю в свойство products: []?
В метод добавления в корзину добавил в аргументы id пользователя. но вот как добавить ему поле products и добавить туда продукт не знаю... (пользователи хранятся в коллекции users)

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

evg_96, почему-то мне кажется лучшим решением, писать состояние в local storagе. Ведь корзиной, по-хорошему, должны иметь возможность пользоваться и незарегистрированные пользователи.
Вы можете использовать redux-persist. Он автоматически будет обновлять local storage по состоянию store для нужных частей состояния и наоборот store по local storage при инициализации.

Пользователю в firebase можно писать совершенные заказы для истории.

[evg_96]

Антон Спирин, Ну для неавторизованных пользователей да, нужно в LS хранить данные, но у меня оформить заказ можно только после регистрации, и к тому же все равно нужно хранить данные о товарах в корзине в БД для зарегистрированных пользователей. Оно как бы и сделано так, чтобы он мог например набросать в корзину товары, а оформить заказ уже например с другого компьютера.

Для меня вот и составляет сложность добавить товар пользователю в массив products в firebase.

PS. Да список совершенных заказов тоже потом надо будет как то делать.

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

evg_96, для сервиса доставки еды это, имхо, лишний функционал. Такой заказ обычно делают в течении 10 - 20 минут и с одного компьютера. Писать в БД лучше именно заказы. Но вы, конечно, поступайте как вам видней.

Answer 2

[davidnum95]

Можно в редьюсере каталога на экшен ADD_PRODUCT_TO_CART_SUCCESS менять состояние добавленного товара. Что то типа:

case ADD_PRODUCT_TO_CART_SUCCESS:
  return {
    ...state,
    entities: {
       ...state.entities,
       [action.payload.productUid]: {
           ...state.entities[action.payload.productUid],
           addedToCart: true,
       }
    }
}