【问题标题】:Where should the business logic go (action creators or reducers) in react using redux?在使用 redux 做出反应时,业务逻辑应该去哪里(动作创建者或减速器)?
【发布时间】:2018-12-01 13:26:24
【问题描述】:

这个问题可能有重复,但它们不能很好地回答我的问题。所以我决定开始一个新线程。

所以我正在尝试为电子商务应用程序创建一个简单的购物篮组件......

以下是 reducer 和 action 文件的代码:

actions.js

export const incrementQuantitySuccess = (basketProducts) =>{
    return {
        type: actionTypes.INCREMENT_QUANTITY_SUCCESS,
        basketProducts:basketProducts
    }
}

export const incrementQuantity = (line) => {
    return (dispatch,getState) => {  

       /*LOGIC for increment quantity*/
        const basketProducts = getState().basket.productsInBasket;
        const updatedBasketProducts = basketProducts.map((product) =>{        
            if (product.id === line.id){
                product.quantity += 1;
                product.total = product.quantity * product.price;
            }

            return product;
        });
        /***************/  

        dispatch(incrementQuantitySuccess(updatedBasketProducts));
  }
}

reducer.js

const incrementQuantitySuccess = ( state, action ) => {
    return updateObject(state,{
        productsInBasket:action.basketProducts,
        loading:false
    });
}

const reducer = (state= initialState,action) => {
    switch(action.type){
        case actionTypes.GET_BASKET: return getBasket(state,action);
        case actionTypes.INCREMENT_QUANTITY_SUCCESS: return incrementQuantitySuccess(state,action);
        default:return state;
    }
}

export default reducer;

现在我已经将增量数量逻辑放在我的 action.js 文件中。

在分配业务逻辑时,我发现了各种关于在 reducer 和 action 创建者之间保持平衡的建议,其中有些人告诉我要让 reducer 变得愚蠢和愚蠢。

我的问题是增量逻辑应该去哪里?我在 redux.js.org 上浏览了几篇关于业务逻辑应该在哪里的文章,但我仍然不清楚。

还有这个特殊的用例,我不确定我是否需要像 redux-logic 这样的中间件。

我是新来的反应。请对此进行指导。

提前致谢

【问题讨论】:

  • 问题中的代码特定于redux-thunk,但没有明确提及。是的,你可能会从 redux-logic 中受益。
  • 你能通过修改上面的例子来解释一下吗?
  • 基本上,LOGIC for increment quantity 应该转到transform Redux 逻辑以执行 INCREMENT_QUANTITY 操作(您甚至不需要单独的 INCREMENT_QUANTITY 和 INCREMENT_QUANTITY_SUCCESS 操作)。这是一件好事,它非常简单。如果您这样做会遇到特定问题,请考虑提出一个新问题。由于当前问题不包含 stackoverflow.com/help/mcve ,因此很难给出有用且可行的答案。
  • 谢谢,但我想我会使用自定义中间件..

标签: javascript reactjs redux react-redux middleware


【解决方案1】:

一种做法说你应该保持你的减速器和动作纯粹,真正的副作用应该发生在你的中间件中。使用这种方法,您将保持 action 和 reducer 干净整洁,并且您可以完全专注于您的中间件,因为它们将成为唯一可能发生副作用的地方。

当我观看 Nir ​​Kaufman 的演讲时,我真的很惊讶,我鼓励您观看他在 ReactNYC Advanced Redux Patterns - Nir Kaufman @ ReactNYC 的演讲。当我在 Redux 上苦苦挣扎时,这个视频给了我很多帮助。

Nir 还谈到了 Redux 和中间件。你可以在这里查看第二个Advanced Redux: Design Patterns and Practices - Nir Kaufman | JSHeroes 2018

希望对您有所帮助!

【讨论】:

  • 我已经开始将中间件视为一种通用功能,而不是高级功能......您的回答和 Nir ​​Kaufman 的谈话更好地解释了为什么逻辑应该进入中间件。我将使用自定义中间件,因为即使是像 redux 逻辑这样的第三方或多或少都遵循与 Nir ​​Kaufman 相同的理念。谢谢。将答案标记为已接受。
  • 很高兴为您提供帮助 :) 祝您好运!
猜你喜欢
  • 2011-06-28
  • 1970-01-01
  • 1970-01-01
  • 2017-10-06
  • 2011-04-20
  • 2010-12-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多