Best practice for recalculating data from redux store data

Question

I just finished connecting the redux application, and this is fantastic for now. However, since the state is stored in a giant repository, you do not have models that you access with your data.

Let's say I have a model class that stores some user information. Usually I add a function to a class called display_name , which intelligently combines the different parts of their name. At the same time, my different views could just call display_name instead of having to know how to figure them out themselves.

Redux explicitly says not to keep the calculated values ​​in a state, so this leaves it definable in the components. However, this may not be right, because then you end up duplicating this code in every component that it needs.

Where is the place to store this logic?

Answer 1

The easiest way is to create utility functions for calculating this data and place them in a separate module, which can be used by the functions of many components of mapStateToProps . Super simple example:

 import { displayName } from "./utils"; function mapStateToProps(state) { return { displayName: displayName(state.user) }; } function MyComponent(props) { return <div>Name: {props.displayName}</div>; } export default connect(mapStateToProps)(MyComponent); 

Answer 2

On the Computing Derived Data page in Redux docs, the proposed approach uses Reselect to handle selection and memoization.

If you are looking for Github for Javascript projects containing the term "createSelector", you should find some real applications that use Reselect in various ways. Here are three that I showed: jfurrow / flood , FH-Potsdam / shifted cards, and Madou / GW2 Armory