代码之家 › 专栏 › 技术社区 › Blankman

如何在不必通过API重新加载整个json对象的情况下改变我的状态

redux-thunk redux reactjs

Blankman · 技术社区 · 7 年前

我将reactjs与redux一起使用,并且在UI上显示类别以及与它们相关联的产品。

当用户将产品移动到另一个类别时,我不想像现在这样重新加载整个JSON文件,因为JSON实际上非常大。

如何通过从一个类别的catProducts集合中移除productId并将productId添加到另一个类别的catProducts集合中来更改此JSON文件。

{
  "shop" : {

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

  }

}

下面是我的动作和减速机,如你所见,每次移动产品时,我都会用产品重新加载整个类别。 我需要做的只是在进行API调用之后,通过从一个catProducts中删除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 };

1 回复 | 直到 7 年前

Tholle 7 年前

假设你有一个索引 fromIndex 代表 categories 将产品从中移出的数组索引, toIndex 代表 类别 要将产品移动到的数组索引,以及 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);

推荐文章

Piotr Chmielowiec · 组件从一个调度发出两个api调用

3 年前

zishe · React Redux同步操作返回一些代理对象而不是字符串

7 年前

DÅ¾enis H. · 仅在刷新页面后呈现道具

7 年前

lex · reactjs减速机相关术语说明[已关闭]

7 年前

kosmicbird · 如何将异步thunk操作延迟到存储了身份验证会话令牌之后?

7 年前

John · 404使用react-routerv4从react redux应用程序中的状态呈现组件时出错?

7 年前

Juan · 与Redux thunk异步/等待。获取错误:操作必须是普通对象。对异步操作使用自定义中间件

7 年前

jsDev · 调用两个异步操作的正确方法

7 年前

samtoya · Redux异步操作getState()返回未定义?

7 年前

Adrian Florescu · Typescript Redux Thunk(类型)

7 年前