如何让这段代码看起来更好

Question

这是我的一个redux reducer，我觉得它很难看。有没有可能改进它？

我想达到的目标很简单：

如果我的当前状态已经有了这个项目，请将数量增加 1，否则将此项添加到状态。

function globalReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      let { item } = action;
      if (state.getIn(['sideCart', 'orderItems', item.id])) {
        item.quantity = state.getIn(['sideCart', 'orderItems', item.id]).get('quantity') + 1;
      } else {
        item.quantity = 1;
      }
      item = fromJS(item);
      const newState = state.setIn(['sideCart', 'orderItems', item.get('id')], item);
      return newState;
    }
    default:
      return state;
  }
}

状态应该是这样的：

sideCart: {
    orderItems: {
      1: {
        id: 'orderItems-1',
        name: 'AI Brown\'s BBQ Fillet of Beef with Brown Mushroom Brandy Sauce',
        quantity: 10,
        price: 12,
        subitems: ['0', '1', '2'],
        instruction: 'No rosemary for beef',
      },
      2: {
        id: 'orderItems-2',
        name: 'AI Brown\'s BBQ Fillet',
        quantity: 10,
        price: 14,
        subitems: ['0', '1', '2'],
        instruction: 'No rosemary for beef',
      },
    },
}

Answer 1

这就是我在语法上增强它的方式：

const reduceCart = (state, action) => {
  let { item } = action;
  const stateIn = state.getIn(['sideCart', 'orderItems', item.id]);
  item.quantity = stateIn 
      ? stateIn + 1
      : 1; 
  item = fromJS(item);
  return state.setIn(['sideCart', 'orderItems', item.get('id')], item);
};

const globalReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART: return reduceCart(state, action);
    default: return state;
  }
};

Answer 2

我在使用 immutable.js 处理深度嵌套对象时发现了同样的复杂性。我制作了一个轻量级的不可变助手：ImmutableAssign，它允许您继续使用纯 JS 对象，这将简化您的操作。

在下面的例子中，它期望 state 和 action 是普通的 JS 对象，它会 return 你新状态 作为普通 JS 对象：

function globalReducer(state = initialState, action) {
    switch (action.type) {
        case ADD_TO_CART: return addCart(state, action);
        default: return state;
    }
}

function addCart(state, action) {               
    let { item } = action;

    return iassign(state, 
        function(state, context) {                    
            return state.sideCart.orderItems[context.item.id] 
        },
        function(selectedItem) { 
            item.quantity = selectedItem.quantity ? selectedItem.quantity + 1 : 1;                
            return item;
        },            
        { item: item });
}


// The first parameter is a function that return the 
// property you need to modify in your state.
// This function must be **pure function**, therefore "item" 
// need to be passed in via the context parameter. 
// 
// The second parameter is a function that modify selected 
// part of your state, it doesn't need to be pure, therefore 
// you can access "item" directly
//
// The third parameter is the context used in the first 
// function (pure function)

如何让这段代码看起来更好

How to make this piece of code look better

javascript

reducers

reactjs

immutable.js

redux