CODEWITHSUNDEEP
reduxreducersredux-toolkit
cbdeveloper
cbdeveloper

Reputation: 31335

Do actions added with extraReducers on createSlice have the slice's name prefix added to their types?

From the official doc's example:

https://redux-toolkit.js.org/api/createSlice#the-extrareducers-builder-callback-notation

import { createAction, createSlice } from '@reduxjs/toolkit'
const incrementBy = createAction<number>('incrementBy')
const decrement = createAction('decrement')

createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(incrementBy, (state, action) => { // DO SOMETHING })
      .addCase(decrement,   (state, action) => { // DO SOMETHING })
      .addDefaultCase((state, action) => {})
  },
})

Also from the docs:

enter image description here

One of the key concepts of Redux is that each slice reducer "owns" its slice of state, and that many slice reducers can independently respond to the same action type. extraReducers allows createSlice to respond to other action types besides the types it has generated.

QUESTION

In the example above, will the cases incrementBy and decrement also get the counter name as a prefix in their types?

Like:

"counter/incrementBy"
"counter/decrement"

Is this how the extraReducers property work?

Upvotes: 0

Views: 2265

Answers (2)

markerikson
markerikson

Reputation: 67439

No, because the entire point of extraReducers is that it does not generate any new action types.

extraReducers exists so that a slice reducer can listen to other action types that have already been defined outside the slice.

Upvotes: 3

cbdeveloper
cbdeveloper

Reputation: 31335

No. It does not get the name prefix.

https://codesandbox.io/s/xenodochial-dew-35ivq

enter image description here

import { createAction, createSlice } from "@reduxjs/toolkit";

interface CounterState {
  value: number;
}

export const decrementV2 = createAction('decrement');

const initialState = { value: 0 } as CounterState;

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment(state,action) {
      console.log(`action.type: ${action.type}`);
      state.value++;
    },
    decrement(state,action) {
      console.log(`action.type: ${action.type}`);
      state.value--;
    }
  },
  extraReducers: (builder) => {
    builder.addCase(decrementV2, (state, action) => {
      console.log("FROM decrementV2 (from extraReducers)")
      console.log(`action.type: ${action.type}`);
      state.value--;
    });
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Upvotes: 1

Related Questions