减速器中的 Redux 状态不是最新的？

debugcn 发表于 Dev

乔希

我正在使用 React/Redux 构建应用程序，我有一系列产品，它们异步加载到 Redux 状态，然后我想从中提取单个产品。但是，我编写的用于执行此操作的 reducer 无法正常工作，因为它将状态注册为null. 这让我感到困惑，因为getState()在返回动作之前调用thunk 动作创建者并触发减速器正在记录产品数组的正确状态。

这是我的代码中的错误还是只是 redux 状态更新的一部分？

动作创建者：getSingleProduct

export const getSingleProduct = productName => (dispatch, getState) => {
  const action = { type: 'GET_SINGLE_PRODUCT', productName };
  if (!getState().products.length) return dispatch(getAllProducts())
    .then(() => {
      console.log('STATE IN ACTION CREATOR THEN BLOCK', getState());
      return dispatch(action);
    })
    .catch(console.log);
  else return action;
}

减速器：当前产品

const currentProduct = (state = null, action) => {
switch (action.type) {
    case 'GET_SINGLE_PRODUCT':
      console.log('STATE IN REDUCER', state);
      return state.products.filter(prod => prod.name.toLowerCase() === action.productName)[0];
      break;
    default:
      return state;
  }
}

控制台日志输出

STATE IN ACTION CREATOR THEN BLOCK 
{ basket: Array(0), products: Array(6), currentProduct: null }


STATE IN REDUCER
null

乔希

减速器状态实际上是最新的，问题是对减速器状态如何工作的误解。我试图利用从statereducer的参数中无法获得的依赖状态。我的解决方案是将这些信息从依赖状态传递到操作对象中。

行动

export const getSingleProduct = (productName, products = []) => (dispatch, getState) => {
  let action = {
    type: 'GET_SINGLE_PRODUCT',
    productName,
    products: getState().products
  }
  if (!action.products.length) dispatch(getAllProducts())
    .then(() => {
      action = Object.assign({}, action, { products: getState().products });
      dispatch(action);
    })
    .catch(console.log);
  else return action;
}

减速器

const currentProduct = (state = {}, action) => {
  switch (action.type) {
    case 'GET_SINGLE_PRODUCT':
      const currentProduct = action.products.filter(prod => prod.name.toLowerCase() === action.productName)[0];
      return Object.assign({}, state, currentProduct);
    default:
      return state;
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。