reducer中的Redux状态不是最新的？

我正在使用React/Redux构建一个应用程序，我有一个异步加载到Redux状态的产品数组，然后我想从中提取单个产品。但是，我编写的用于执行此操作的reducer无法工作，因为它正在将状态注册为

null

。这让我很困惑，因为在返回操作并触发reducer之前，在thunk action creator中调用

getState（）

，是在用产品数组记录正确的状态

这是我的代码中的错误还是只是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;
  }
}

减速器：当前产品

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;
  }
}

控制台日志输出

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;
  }
}

---

状态为null，因为您在第一次函数调用时将其定义为null。 console.log在操作完成并看到值运行后的状态。 返回修改状态是错误的。应该返回新状态

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

    return { ...state, products } 
    break;
  default:
   return state;
 }
}

---

减速机状态实际上是最新的，这个问题是对减速机状态如何工作的误解。我试图使用一个依赖状态，它不能从减速机的

state

参数中获得。我的解决方案是将此信息从依赖状态传递到action对象

行动

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;
  }
}

---

嗨，我试着用我的减速机换你的，但结果是一样的。我不确定我是否完全理解您所做的更改，

filter（）

方法是不可变的，因此我不会更改那里的状态，也不确定添加

slice（）

的价值。当状态为null时，在返回对象中使用扩展状态也可以实现什么？是被忽略了吗？@Josh我只是有点不对劲。您无法在console.log中看到reducer值，因为此时状态为

null

，请尝试

conse.log

操作后调用hanks以获得帮助。我现在意识到我的根本问题是什么。我试图在我的

currentProduct

reducer中使用依赖的

products

状态。相反，我现在将其传递到action对象的reducer中，它已经解决了这个问题。好的，很好，没有问题