redux - Should calculations be stored in Redux store if those are to be submitted in a request?

Question

I have a form that asks the user to type in some numbers. Then, some calculations are made using those numbers that are stored in a Redux store. Right now I do not store the calculations in the Redux store, but just do them inside the render function of my component.

Now I need the submitted form to include those calculated values in my HTTP request. How should I go about it? Should I make the Redux store hold the calculations?

Answer 1

If you plan on using the raw values as well as the calculated values in your UI, I can see a benefit to keeping both inside of your redux store.

If you only need to use the calculation when you make the HTTP request, and the calculated data is not being used as a part of the UI, a cleaner implementation might be to separate the function that does the calculation into a utility file, and importing and using the function in the component/container or actions file that the calculation is needed.

I think this would create a clearer separation of concerns in each file, and the calculation utility could be used in multiple files if necessary.

// Utility file
export const calculationFunction = (someParam) => {
  \\ Calculation here
  return yourAnswer
}

then

// Actions File (Note this is how my action dispatch is set up, yours might look a bit different 
import { calculationFunction } from 'utilities/calculations';

export const sendData = (data) => ({
  type: types.SEND_DATA,
  responseTypes: [types.SEND_DATA_SUCCESS, types.SEND_DATA_FAILURE],
  promise: (client: any) => client.post('/data', calculationFunction(data)),
});