將業務邏輯放在哪裏？動作或商店

Question

我來自Reflux到Redux。在迴流你的業務邏輯是隻存在於店內但終極版它似乎「終極版」 different..for比如我有「異步行動」和我一起「終極版 - 咚」付諸實施。

在一個場景中，我想檢查我的操作中的某些內容，如果需要我向服務器發送請求並獲取一些數據。我這種情況下，我必須檢查我的行動邏輯，實際上我的業務邏輯是存在的行動和存儲在一起，它不好..你的解決方案是什麼？

，比如我有複選框，我檢查一些條件，如果結果爲真我將請求發送到服務器，這裏是我的動作代碼，當你看到我的商業邏輯是對我的行動，我的減速機：

export function onCheckboxClick({itemId}) { 
    return (dispatch, getState) => { 
     let state = getState().get('myReducer'); 

     let myConditionResult = state.get('foods').get(0).get('test');//for exmaple check some condition in my store 

     dispatch({type: 'CHECKBOX_CLICK', itemId});// for change the checkbox checked 

     if (myConditionResult) { 
     myApi.deleteOrderItem({itemId}).then(()=> { 
      dispatch({type: 'DELETE_ORDER_ITEM_FULFILLED', itemId}); 
     }).catch((err)=> { 
      console.log(err); 
      dispatch({type: 'DELETE_ORDER_ITEM_REJECTED', itemId}); 
     }); 
     } 
    }; 
} 

在此先感謝

Answer 1

如前所述，根據您的使用情況，有多種方式可以執行此操作。我能做的是列出你猜測你的用例似乎更合適的東西。

1.組件內的邏輯。

持有的條件能通過映射狀態使用connect道具react-redux

帶入分量也導入行動到這個組件文件和地圖的動作道具以及狀態。

下面的示例演示瞭如何將狀態和操作引入組件文件。你如何使用它取決於你。我已經把它放在一個簡單的上下文中。所以你可以在你希望執行邏輯的地方調用myFunction()。

MyComponenet。JS

import React, { Component} from 'react' 
import { connect } from 'react-redux' 
import { onCheckboxClick } from 'path/to/action' 

class MyComponenet extends Component { 

    myFunction() { 
     const { theConditiion, onCheckboxClick } = this.props 

     if (theConditiion) { 
      onCheckboxClick({itemId: 'someItemid'}) 
     } 
    } 

    render() { 
     //... 
    } 
} 


const mapStateToProps = (state) => ({ 
    theConditiion: state.wherever.the.data.lives.in.store 
}) 

export default connect(
    mapStateToProps, 
    { onCheckboxClick } 
    )(MyComponenet) 

因此，您可以將您onCheckboxClick功能上面的例子中刪除您目前擁有的條件檢查。

2.將邏輯放入中間件中。

下面的示例演示瞭如何分派動作，但首先'捕捉'特定類型的動作，如果條件爲真，您可以進行api調用並分派進一步的動作（如果爲false） ，只需將該操作傳遞給下一個中間件。

myMiddleware.js

const onCheckboxClick = store => next => action => { 
    if (action.type == 'CHECKBOX_CLICK') { 

    let theConditiion = store.getState().wherever.the.data.lives.in.store 

    if (theConditiion) { 
     // 1. make the api call here, or, 
     // 2. dispatch an action specific to handling api calls. 
     // E.g. Create another middleware to catch action type `API_CALL` 
     // This middleware can then handle all api calls, and dispatch actions for api requests, responses and errors. 

     const newAction = {...action, type: 'API_CALL' } 
     store.dispatch(newAction) 

     // When you use store.dispatch(), the action will be passed back to the top of the middleware chain. 
    } 

    return next(action) // this will pass the action to the next middleware in the chain. 

} 

export default onCheckboxClick 

這是一個廣泛的概述，以幫助你在想什麼效果最好。請記住，隨着您的應用程序的發展，您會注意到重複的邏輯可以用於自己的功能。

Answer 2

引述Redux FAQ entry on "how to split business logic between action creators and reducers"：

有沒有單一明確的答案的邏輯件應在減速或動作去什麼創造者。

如果你把所有的邏輯放在動作創建器中，你最終會得到基本上聲明狀態更新的胖動作對象。減速器變得純粹，笨拙，添加 - 刪除它，更新這些功能。他們將很容易撰寫。但是你的業務邏輯不會太多。如果你在reducer中加入更多的邏輯，你最終會得到很好的精簡動作對象，大部分的數據邏輯集中在一個地方，但是你的reducer很難編寫，因爲你可能需要來自其他分支的信息。你最終會得到大型減速器或減速器，這些減速器或減速器會從該州的較高位置獲得額外的參數。

它是有效的調度是得到由減速器忽視的作用，而且它也適用於先檢查狀態，並決定不派遣一個動作。最終，它確實符合您的需求。

Answer 3

以下是一些反對REDX建議的自以爲是的答案。

TL; DR 無論

較長的答案：在所謂的異步操作從中間件調用。在redux社區它被稱爲「thunk」或「saga」。

首先，一些定義：

• 動作：一個普通的對象{ type: 'ACTION_TYPE', payload: { data } }
• 動作創建者：返回動作的功能。
• 異步操作：從中間件調用的函數。
• 異步行動的創建者：返回異步操作
• 中間件的功能：它可以處理所有的動作，調度等措施，先後獲得存儲狀態的功能。

那麼，我們從哪裏調用業務邏輯呢？

如果你仔細觀察，你會發現，我們並不需要異步操作和異步行動的創建者。我們可以有一個簡單的動作，它直接在中間件中處理。

在中間件，我們可以爲每個行動專用處理。這處理程序行爲像異步操作但我們不這樣稱呼它。我們稱之爲交互者。

所以一個新的定義：

交互件：什麼本質上是終極版異步操作，但終極版特有的不是抽象的。交互器獲取數據，調用業務邏輯並分派結果「動作」。

middleware = (...) => { 
    // if(action.type == 'HIGH_LEVEL') 
    interactors[action.name]({ dispatch, params: action.payload }) 
} 

const interactors = { 
    async highLevelAction({ dispatch, params }) { 
    dispatch({ loading: true }); 
    const data = await api.getData(params.someId); 
    const processed = myPureLogic(data); 
    dispatch({ loading: false, data: processed }); 
    } 
} 

如何分派吧：

dispatch({ type: 'HIGH_LEVEL', name: 'highLevelAction', { someId: 1 } })