Where to put business logic in redux? action or store

Question

i come from Reflux to Redux. in Reflux your business logic is exist only in store but in Redux its seems different..for exampl

Answer 1

As mentioned, there are multiple ways to perform this action depending on your use case. What I can do is list you what seems more appropriate from speculating your use case.

1. Logic inside the Component.

The state that hold the condition can be brought into the component by mapping the state to props using connect from react-redux

You also import the action into this component file and map the action to props as well.

The example below demonstrates how you bring the state and action into the Component file. How you use it is up to you. I've put it into a simple context. So you may invoke myFunction() at the point you wish perform the logic.

MyComponent.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)

Therefore, you can remove the conditional checks you currently have within your onCheckboxClick function for the example above.

2. Putting logic inside the middleware.

The example below demonstrates how you can dispatch action(s) but first, 'catching' a particular type of action, given that that a condition is true, you can make an api call and dispatch further actions, if false, just pass the action to the next middleware.

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

This is a broad overview to help you get thinking what works best. Keep in mind, as your app develops, you will notice where repeated logic can be made into its own functions.