Reselect project structure

Reselect is a library for memoization of values derived from redux state, thereby reducing duplicated calculation and improving the performance. Computing the value outside of component make us be able to get rid of some value that is only used as parameter of the computing function, thus reducing redundant component re-render.

At the beginning of our team started using Reselect, we treat it as a formator, which transform data into the format that meets different components need.

components/
  ComponentA/
    index.js
    selectors.js
  ComponentB/
    index.js
    selectors.js
...

What’s the problem?

Not long after we create more and more selector, we found that some components need value produced by same selector. If we kept the structure above, we may write such code like below.

// In ComponentC
// Aha! The selector that this component need is already in ComponentA. DRY!!!
import { selectSomething } from '@/components/componentA/selectors';

However this style makes no sense. Here are the disadvantages:

• If you are working with team, others may have no idea what selectors you’ve written in so many components.
• Placing selector in one component folder makes other think this selector only needs to meet demand of this component. When the demand changing, there may be unexpected error if you use the selector beyond this component.
• Actually we can use selector in epics too. Importing selector from component for redux level usage is just like borrowing money from your son in primary school.

The project structure we applied.

We need a structure which is easily to distinguish whether the selector is used by many component and epics. Selectors are divided into three types in the structure our team applied:

• reducer selector: the input data is from single reducer, store in specific reducer folder
• composition selector: the input data is from multiple reducers, store in root reducer folder
• component selector: the output data is for specific component, store in specific component folder

The project structure is shown below. Note that we use redux-toolkit (slices, you can consider it as reducer) to improve development efficiency and it is awesome!

src/
  components/
    ComponentA/
      index.js
      selectors.js  # component selector
    ComponentB/
      index.js
      selectors.js
    ...
  redux/
    slices/
      sliceA/
        index.js
        selectors.js  # reducer selector
      sliceB/
        index.js
        selectors.js
      ...
    selectors.js  # composition selector

In the developing process, you may not know that the new selector you are creating was created by other colleague or will be used by many component in the future. I summed up two step to maintain this project structure.

1. Check component selector or reducer selector whether a similar selector already existed.
2. If not, and you are not sure whether it will be used by other component, feel free to create it as a component selector. You can move selector to reducer level in future developing or code review since moving it is not a big effort at all.

Conclusion

The project structure this article introduced aim to solve reusability issue of Reselect. You can figure out the pattern that meets the demand and habit of your teammates under this thought.