MENU


createSlice

Building on createAction() and createReducer(), createSlice() combines the definitions of action creators and reducers in one go, further simplifying the process:

If two fields from 'reducers' and 'extraReducers' happen to end up with the same action type string, the function from 'reducers' will be used to handle that action type.
You can combine the reducers from multiple slices with the function combineReducer().
import { createSlice, createAction } from '@reduxjs/toolkit'
import { createStore, combineReducers } from 'redux'

const incrementBy = createAction('incrementBy')
const decrementBy = createAction('decrementBy')

const counter = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
    multiply: {
      reducer: (state, action) => state * action.payload,
      prepare: (value) => ({ payload: value || 2 }), // fallback if the payload is a falsy value
    },
  }
})

const user = createSlice({
  name: 'user',
  initialState: { name: '', age: 20 },
  reducers: {
    setUserName: (state, action) => {
      state.name = action.payload
    },
  }
});

const reducer = combineReducers({
  counter: counter.reducer,
  user: user.reducer,
});

const store = createStore(reducer);

store.dispatch(counter.actions.increment());
store.dispatch(counter.actions.increment());
store.dispatch(counter.actions.multiply(3));
store.dispatch(counter.actions.multiply());
console.log(`${counter.actions.decrement}`);
store.dispatch(user.actions.setUserName('eric'));