How to create reusable redux-module?

Question

For example, my app contains the two list: colors & my favorite colors. How to create the re-usable filter-module for this two lists?

The problem is the actions in redux commiting into global scope, so filter-reducer for colors and filter-reducer for favorite colors reacting to the same actions.

I try something like high-order functions that receive the module-name and returned new function (reducer) where classic switch contain module + action.type.

But how make scoped actions or scoped selectors? Best-practise?

Maybe Redux-Toolkit can solve this problem?

High-order reducer

High-order action

High-order selector

Answer 1

Well described here

Name your function like createFilter and add a parameter like domain or scope after this in switch check it e.g

export const createFilters = (domain, initState) => {
  return (state = initState, { type, payload }) => {
    switch (type) {    
      case: `${domain}/${FILTER_ACTIONS.ADD_FILTER}`:
...

and for actions create something like this

const createFilterActions = (domain: string) => {
  return {
    addFilter: (keys: string[]) => {
      return {
        type: `${domain}/${FILTER_ACTIONS.ADD_FILTER}`,
        payload: keys
      }
    },
    updateFilter: (key: string, state: any) => {
      return {
        type: `${domain}/${FILTER_ACTIONS.FILTER_UPDATED}`,
        payload: { key, state }
      }
    },
  }
}