在 Redux 中更新多个数组的值

Question

我正在更新数组，我想根据给定的 newCode 响应更新 productCode。这是通过单击 'CREATE ALL PRODUCTS' 按钮。我认为问题出在减速器上。目前没有更新 productCode 和 newProductCode

提示：productIndex是找到它的关键

点击这里：CODESANDBOX

动作

export const createAllProducts = (products) => async (dispatch) => {
  try {
    dispatch({
      type: appConstants.CREATE_ALL_PRODUCTS_REQUEST
    });

    const responses = [
      {
        config: null,
        data: {
          newCode: "NEW_AA"
        },
        headers: null
      },
      {
        config: null,
        data: {
          newCode: "NEW_FF"
        },
        headers: null
      },
      {
        config: null,
        data: {
          newCode: "NEW_GG"
        },
        headers: null
      }
    ];

    const finalResponses = responses.map((product, index) => ({
      newProductCode: product.data.newCode,
      productCode: product.data.newCode,
      productIndex: products[index].productIndex
    }));

    console.log(finalResponses);

    dispatch({
      type: appConstants.CREATE_ALL_PRODUCTS_SUCCESS,
      payload: finalResponses
    });
  } catch (error) {
    dispatch({
      type: appConstants.CREATE_ALL_PRODUCTS_FAILURE
    });
  }
};

减速器

case appConstants.CREATE_ALL_PRODUCTS_SUCCESS:
  const updatedProducts = state.products.map((product, index) => {
    const found = action.payload.find((el) => el.productIndex === index);

    return found
      ? {
          ...updatedProducts,
          productCode: found.productCode,
          newProductCode: found.newProductCode
        }
      : product;
  });
  return {
    ...state,
    isCreatingAllProducts: false,
    products: updatedProducts
  };

Answer 1

您使用了 reduce 方法和初始值状态，这是实际的旧状态。考虑这个例子：

const state = { history: null }
const payload = [ 'hello', 'equal' ]

//your current reducer
const newState = payload.reduce((acc, cur) => { acc[cur] = cur; return acc } , state)


//the state reference point to the same obj, then redux will not trigger re-render
console.log(newState === state) // true

Answer 2

减速器有问题

case appConstants.CREATE_ALL_PRODUCTS_SUCCESS:
  return {
    ...state,
    products: state.products.map((product, index) => {
      const found = action.payload.find((el) => el.productIndex === index);
      console.log(found);

      return found
        ? {
            ...product,
            productCode: found.productCode,
            newProductCode: found.newProductCode
          }
        : product;
    })
  };

在 Redux 中更新多个数组的值

Update Values of Multiple Array in Redux

reactjs

redux