Where should complex operations be performed in React / Redux?

Question

React

I'm starting to practice with React/Redux. I don’t understand where the application logic should be stored, i.e. complex data operations will be performed. After reading the documentation, I formed a picture that, to work with data, there is a Redux Store, a reducer, action-creators functions, and "smart" React components. For example, by pressing a button, an action was called that should get several objects from the store, perform some complex operations with this data, and, depending on the result, call a few more actions, or not call anything, but simply return a new state. The Redux documentation says that the reducer should deal exclusively with changing the store, that is, as I understand it, there should only be the results of some complex functions, and not the functions themselves? You can transfer data to the "smart component",
If the reducer should only "insert" the changed data into the store, then where should the operations with this data be carried out? The tutorials provide examples with only increment operations, or replacing one text in the Redux store with another, but no more. I understand that many of the actions are performed on the server, but still...

Answer 1

For side effects and other action calls, it is customary to use middleware( redux-thunk , redux-saga ). There shouldn't be anything like this in reducers.
Reducers should remain pure functions and all computations in them should be limited to synchronous state updates.

Answer 2

Nothing prevents you from performing calculations in the reducer, its role is not only to replace some data in the store, but also to prepare this data. Just remember that the reducer must be fully synchronous. Therefore, long calculations will hang your application.

Answer 3

Depends on the nature of the calculations. I'm using redux thunk to prepare data before sending it to the server, get and transform the response from the server, and then call dispatch with the data to put in the store. Reducers can be used to merge changes with the current state, you cannot make asynchronous requests here and it is better to avoid complex calculations. Data transformation from the store (filtering, sorting) is best done in selector functions using reselect.