如何在redux中使用reducer react

Question

我正在使用 Redux 进行状态管理，我在 reducer 函数中遇到了问题这是我的控制台的图像，您可以看到产品操作正在提供我的数据，但 reducer 没有传递我的功能

这是我的 ProductAction 代码：

export const getProductsbyFind = (myvariable) =>async (dispatch)=>{
    try {
        console.log(myvariable)
        dispatch({type: ALL_PRODUCTS_REQUEST_BY_ID})
        const{ data } = await axios.get(`/api/v1/product/${myvariable}`)
        console.log(data)
        dispatch({
            type: ALL_PRODUCTS_SUCCESS_BY_ID,
            payload: data
        })
        
    } catch (error) {
        dispatch({
            type:ALL_PRODUCTS_FAIL,
            payload: error.response.data.message
        })
        
    }
}

这里是Reducer的代码：

export const productReducersById = (state = { products: [] }, action) => {
    switch (action.type) {
        case ALL_PRODUCTS_REQUEST_BY_ID:
            return {
                loading: true,
                products: []
            }
        case ALL_PRODUCTS_SUCCESS_BY_ID:
            return {
                loading: false,
                products: action.payload.products,
                productsCount: action.payload.productsCount
            }
        case UPDATE_QUANTITY_BY_ID:
            const { index, quantity } = action.payload;
            const prods = state.products.map((p, i) => {
                if (i !== index)
                    return p;
                return {
                    ...p,
                    quantity
                }
            });
            return {
                loading: true,
                products: prods
            }

        case ALL_PRODUCTS_FAIL_BY_ID:
            return {
                loading: false,
                error: action.payload
            }
        case CLEAR_ERRORS_BY_ID:
            return {
                ...state,
                error: null
            }
        default:
            return state
    }
}

这是我要获取数据的页面代码：

  const { loading, products, error, productCount } = useSelector(state => state.products);
  console.log(products)
  useEffect(() => {
    dispatch(getProductsbyFind(myvariable));
  }, [dispatch])

Answer 1

你的reducer有错别字：

  case ALL_PRODUCTS_SUCCESS_BY_ID:
      return {
          loading: false,
-         products: action.payload.products,
+         products: action.payload.product,
          productsCount: action.payload.productsCount
      }

（此外，productsCount 不存在于您的负载中，因此它将变为 undefined。）

如何在redux中使用reducer react

How to use reducer in redux in react

javascript

reactjs

redux

react-redux

mern