Using HoC pattern with TypeScript and createReducer

[fcbeyer]

RTK question. How do I do the second example in this code block https://redux.js.org/recipes/structuring-reducers/reusing-reducer-logic#customizing-behavior-with-higher-order-reducers with createReducer in typescript? I saw this https://redux-toolkit.js.org/usage/usage-with-typescript#wrapping-createslice but I don't see how to accomplish the "if (name !== counterName) return state" pattern.

For instance: say I have two redux slices that share the same set of actions but need their own slice of the same type of state. Currently I do something like this

export const tasks = (state = fromJS(INITIAL_STATE), action) => {
  return action.meta === UNIT
    ? reducer(state, action)
    : state;
};

export const instTasks = (state = fromJS(INITIAL_STATE), action) => {
  return action.meta === INSTRUCTION
    ? reducer(state, action)
    : state;
};

I'm not sure how I can do that with the createReducer pattern and TypeScript.
I am stuck at this point

const TaskBuilder = (builder: ActionReducerMapBuilder<TaskState[]>) => {
  builder.addCase(TasksAction.addTask, (state) => {
    state.push(createDefaultTaskState(state.length));
  });
  builder.addCase(TasksAction.markListenModeAsUsed, (state) => {
    const lastTask = state[state.length - 1];
    lastTask.listenMode = true;
    state.push(lastTask);
  });
  builder.addCase(TasksAction.sendDataToTasks, (state, action) => {
    return state.map((task) => {
      if (task.id === action.payload.id) {
        const { attempts, complete, contentId, status, type } = action.payload;
        return { ...task, attempts, complete, contentId, status, type };
      }
      return task;
    });
  });
};

export const StandardTaskReducer = createReducer(
  createInitialTasksState(),
  TaskBuilder
);
export const InstructionTaskReducer = createReducer(
  createInitialTasksState(),
  TaskBuilder
);

[jacksontong]

I have exactly same question.

[phryneas]

I think you're both looking at .addMatcher ?

[jacksontong]

I don't think that's what I'm looking for.
https://redux-toolkit.js.org/api/createReducer#builderaddmatcher
Allows you to match your incoming actions against your own filter function instead of only the action.type property.

while what I want is similar to this for createReducer

function createCounterWithNameData(counterName = '') {
  return function counter(state = 0, action) {
    const { name } = action
    if (name !== counterName) return state

    switch (action.type) {
      case `INCREMENT`:
        return state + 1
      case `DECREMENT`:
        return state - 1
      default:
        return state
    }
  }
}

const rootReducer = combineReducers({
  counterA: createCounterWithNameData('A'),
  counterB: createCounterWithNameData('B'),
  counterC: createCounterWithNameData('C')
})

I'm using switch/case with immer for my reducer instead.

[phryneas]

That is just no pattern RTK supports in any way. But of course you can just write regular Redux code for it.

Generally, looking at this I wonder if you would not benefit from having only one slice and a normalized state in there though.

[markerikson]

The simplest answer here is to simply include the "feature name" as part of the slice name field.

It's really the same pattern shown here:

https://redux-toolkit.js.org/usage/usage-with-typescript#wrapping-createslice