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

【问题标题】：Redux state in reducer not up to date?减速器中的 Redux 状态不是最新的？
【发布时间】：2018-09-12 00:43:35
【问题描述】：

我正在使用 React/Redux 构建一个应用程序，我有一个异步加载到 Redux 状态的产品数组，然后我想从中提取单个产品。但是，我为此编写的减速器无法正常工作，因为它正在将状态注册为null。这让我感到困惑，因为在返回动作和触发减速器之前在 thunk 动作创建器中调用 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;
  }
}

控制台日志输出

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


STATE IN REDUCER
null

【问题讨论】：

标签： redux react-redux state redux-thunk

【解决方案1】：

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

【讨论】：

嗨，我尝试用你的减速器换掉我的减速器，但它产生了相同的结果。我不确定我是否完全理解您所做的更改，filter() 方法是不可变的，所以我没有更改那里的状态，我不确定添加 slice() 的价值是什么。当状态为 null 时，在返回对象中也使用传播状态可以实现什么？它只是被忽略了吗？
@Josh 我只是一点点正确的减速器。您在 console.log 中看不到 reducer 值，因为此时状态为 null，请在操作调用后尝试 consoe.log
感谢您的帮助。我现在已经意识到我的根本问题是什么。我试图在我的currentProduct 减速器中使用依赖的products 状态。相反，我现在将其传递给已解决问题的操作对象上的减速器。
好的，很好，没问题

【解决方案2】：

Reducer 状态实际上是最新的，问题在于对 reducer 状态如何工作的误解。我试图利用reducer 的state 参数中不可用的依赖状态。我的解决方案是将此信息从依赖状态传递到操作对象。

动作

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

【讨论】：