没有开关盒的 React-redux reducer

Question

我正在为我的应用程序使用 react-redux。我面临一个问题。我有以下产品减速器，但我不想使用开关盒，因为以下情况是我的不同产品屏幕。在使用 switch case 时，当我加载 vegProducts 时，Offers 屏幕变空了。

//在productsreducer中

  const initialState = {};
    
    export const productsReducer = (state = initialState, action) => {
      switch (action.type) {
        case SET_OFFERS:
          return {
            offers: action.offers,
          };
        case SET_VPRODUCTS:
          return {
            vegProducts: action.vegProducts,
          };
        case SET_NPRODUCTS:
          return {
            nvegProducts: action.nvegProducts,
          };
      }
      return state;
    };

我在 App.js 中调用了不同的减速器，如下所示

import productsReducer from './store/reducers/products';
import cartReducer from './store/reducers/cart';
import ordersReducer from './store/reducers/orders';

const rootReducer = combineReducers({
  products: productsReducer,
  cart: cartReducer,
  orders: ordersReducer,
});

任何帮助将不胜感激，因为我已经花了将近 3 天的时间在互联网上搜索解决方案。

Answer 1

您应该将数据附加到状态，而不是替换它。将其更改为：

  const initialState = {};
    
    export const productsReducer = (state = initialState, action) => {
      switch (action.type) {
        case SET_OFFERS:
          return {
            ...state, // <--- add this to append offers to state
            offers: action.offers,
          };
        case SET_VPRODUCTS:
          return {
            ...state, // <--- add this
            vegProducts: action.vegProducts,
          };
        case SET_NPRODUCTS:
          return {
            ...state, // <--- add this
            nvegProducts: action.nvegProducts,
          };
      }
      return state;
    };

要了解其工作原理：

let state = {a: 1, b: 2} // <-- the state
{...state} // {a: 1, b: 2} <-- spread operator spreads the properties of the object
{b: 3} // {b: 3} <-- currently your doing this 
{...state, b: 3} // {a: 1, b: 3} <-- you should instead append b to state, like this
{...state, a: 5} // {a: 5, b: 2} <-- appending a to state

没有开关盒的 React-redux reducer

React-redux reducer without switch case

action

switch-statement

reducers

react-native

react-redux