Как я могу изменить свое состояние, не перезагружая весь объект json через API

Я использую reactjs с redux, и в пользовательском интерфейсе я показываю категории вместе с продуктами, с ними связанными.

Когда пользователь перемещает продукт в другую категорию, мне не нужно перезагружать весь файл JSON, как я делаю сейчас, потому что JSON на самом деле довольно большой.

Как я могу изменить этот файл JSON, просто удалив productId из коллекции catProducts одной категории и добавив productId в коллекцию catProducts других категорий.

{
  "shop" : {

    "categories": [
      {
        id: 1,
        name: "category1",
        "catProducts" : [
          {
            productId: 123
          }          
        ]
      },
      {
        id: 2,
        name: "category2",
        "catProducts" : [
          {
            productId: 456
          }          
        ]
      },
      {
        id: 3,
        name: "category3",
        "catProducts" : [
          {
            productId: 789
          }          
        ]
      }
    ]

  }

}

Ниже приведены мои действия и редукторы, как вы можете видеть, я перезагружаю всю категорию продуктами каждый раз, когда продукт перемещается. Все, что мне нужно сделать, это после вызова API изменить мое состояние, удалив productId из одного catProducts и добавив его в другой. Как я могу это сделать?

Действия:

moveProduct: (data) => {
  return dispatch => {
  var url = '....'; // api to move the product in db
  axios.post(url, reqArgs)
    .then(function(resp) {
      dispatch(Actions.fetchCategoriesAndProducts(data.shopId));
    });
  };
},

Редуктор:

case Constants.FETCH_CATEGORIES_AND_PRODUCTS:
  return {...state, fetching: false, shop: action.data };

reactjs redux redux-thunk
person Blankman    schedule 07.08.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Учитывая, что у вас есть индекс fromIndex, представляющий categories индекс массива, из которого нужно переместить продукт, toIndex, представляющий categories индекс массива, в который нужно переместить продукт, и productId продукта, который нужно переместить, вы могли бы сделать это следующим образом:

const data = {
  shop: {
    categories: [
      {
        id: 1,
        name: "category1",
        catProducts: [
          {
            productId: 123
          }
        ]
      },
      {
        id: 2,
        name: "category2",
        catProducts: [
          {
            productId: 456
          }
        ]
      },
      {
        id: 3,
        name: "category3",
        catProducts: [
          {
            productId: 789
          }
        ]
      }
    ]
  }
};

const fromCategoryIndex = 0;
const toCategoryIndex = 1;
const productId = 123;

const categories = [...data.shop.categories];

categories[fromCategoryIndex] = {
  ...categories[fromCategoryIndex],
  catProducts: categories[fromCategoryIndex].catProducts.filter(
    product => product.productId !== productId
  )
};

categories[toCategoryIndex] = {
  ...categories[toCategoryIndex],
  catProducts: [...categories[toCategoryIndex].catProducts, { productId }]
};

console.log(categories);

person Tholle    schedule 07.08.2018
comment
Где мне это сделать, в моем редукторе? Как в заявлении дела? - person Blankman; 07.08.2018