redux - redux 中的业务逻辑应该放在哪里？行动或商店

Question

我来自回流 至还原 .在 Reflux 中，您的业务逻辑仅存在于商店中，但存在于 中还原 它似乎不同..例如在“ Redux ”中我有 “异步操作”我用“ redux-thunk ”实现了它。

在一种情况下，我想检查我的操作中的某些内容，如果需要，我将请求发送到服务器并获取一些数据。在这种情况下，我必须检查我的操作中的逻辑，实际上我的业务逻辑存在于操作中并存储在一起，它不好..你的解决方案是什么？

例如，我有复选框，我检查了一些条件，如果结果为真，我向服务器发送请求，这是我的操作代码，如您所见，我的业务逻辑在我的 Action 和 Reducer 上:

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 将状态映射到 Prop ，可以将保持条件的状态带入组件。来自 react-redux

您还将 Action 导入此组件文件并将 Action 映射到 Prop 。

下面的示例演示了如何将状态和操作带入组件文件。你如何使用它取决于你。我把它放在一个简单的上下文中。所以你可以调用 myFunction()在您希望执行逻辑的地方。

我的组件.js

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

class MyComponent extends Component {

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

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

    render() {
      //...
    }
 }


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

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

因此，对于上面的示例，您可以删除您当前在 onCheckboxClick 函数中的条件检查。

2. 将逻辑放入中间件。

下面的示例演示了如何调度 Action ，但首先，“捕获”特定类型的 Action ，假设条件为真，您可以进行 api 调用并调度进一步的 Action ，如果为假，只需传递 Action 到下一个中​​间件。

我的中间件.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

这是一个广泛的概述，可帮助您思考什么是最有效的。请记住，随着您的应用程序的开发，您会注意到可以将重复的逻辑变成其自己的功能。