Skip to main content

Quick Start

Purpose#

The Slices for Redux package intent is to make it easy to write predictable Redux code that scales. It was created to:

  • Reduce code wiring boilerplate
  • Reduce code merge conflicts
  • Promote more code to split
  • Promote a predictable folder / files structure
  • Promote reusable encapsulated Redux modules

Slices for Redux leverages the Redux Toolkit and exposes a rootSliceGroup object, a different createSlice() function and a createSliceGroup() function.

What's Included#

Slices for Redux includes:

  • rootSliceGroup: Object that holds a mutable "root-reducer" allowing slice reducers to be added as their code is imported, removes code boilerplate and promotes code splitting.
  • createSlice(): Function that creates a Slice with basic selectors and a mutable "case-reducer" to promote writing sets of case reducers in separate files.
  • createSliceGroup(): Function that creates a SliceGroup to organize and ease the navigation of a large Redux State object.

Installation#

Slices for Redux is available as a package on NPM for use with a module bundler or in a Node application:

# NPMnpm install --save @vmw/slices-for-redux
# Yarnyarn add @vmw/slices-for-redux

Note: Redux Toolkit @reduxjs/toolkit is a required peer dependency

Use the rootSliceGroup's reducer#

Replace code like this:

import { combineReducers, configureStore } from '@reduxjs/toolkit';
const rootReducer = combineReducers({  [homeSlice.name]: homeSlice.reducer,  [todoSlice.name]: todoSlice.reducer,});
const store = configureStore({  reducer: rootReducer,});

With code like this:

import { rootSliceGroup } from 'slices-for-redux';import { configureStore } from '@reduxjs/toolkit';
rootSliceGroup.addReducers({  [homeSlice.name]: homeSlice.reducer,  [todoSlice.name]: todoSlice.reducer,});
const store = configureStore({  reducer: rootSliceGroup.reducer,});

And later as lazy loaded module are loaded they can add their reducers to the "root-reducer" via the rootSliceGroup.

rootSliceGroup.addReducers({ [sliceName]: sliceReducer });
rootSliceGroup.addReducers({ slice2: sliceReducer2, slice3: sliceReducer3 });