nartc / ngrx-slice

Moved to https://github.com/nartc/nartc-workspace

Moved to https://github.com/nartc/nartc-workspace

ngrx-slice

ngrx-slice is a plugin that intends to provide the same functionalities that Redux Toolkit createSlice provides. It is meant to be opinionated.

Installation

npm install ngrx-slice

yarn add ngrx-slice

Peer Dependencies

ngrx-slice has ngrx-immer and immer as its peerDependencies so go ahead and install those:

npm install ngrx-immer immer

yarn add ngrx-immer immer

Here's one command for all three:

npm install ngrx-slice ngrx-immer immer

yarn add ngrx-slice ngrx-immer immer

Documentations

Visit NgRX Slice Documentations

Why

NgRX has always been coupled with boilerplate. Even with the new Creator APIs, the amount of boilerplate needed to set up a single feature state is still a lot (to remember). To fully utilize NgRX for a Feature State, you'd need:

• Actions (createAction)
• Selectors (createSelector and createFeatureSelector)
• Reducer (createReducer)

Regardless of whether you separate these entities into different files, or keep them in the same file, the cognitive overhead is still there. ngrx-slice solves this issue for me.

Here's an example of a CounterState using createAction, createSelector, createFeatureSelector, and createReducer

// Actions
const increment = createAction("[Counter] increment");
const decrement = createAction("[Counter] decrement");
const double = createAction("[Counter] double");
const multiplyBy = createAction(
  "[Counter] multiplyBy",
  props<{ multiplier: number }>()
);
const multiplyBySuccess = createAction(
  "[Counter] multiplyBy success",
  props<{ value: number }>()
);

// Reducer
interface CounterState {
  value: number;
  increment: number;
  decrement: number;
}

const initialState: CounterState = {
  value: 0,
  increment: 0,
  decrement: 0,
};

const counterReducer = createReducer(
  initialState,
  on(increment, (state) => ({
    ...state,
    value: state.value + 1,
    increment: state.increment + 1,
  })),
  on(decrement, (state) => ({
    ...state,
    value: state.value - 1,
    decrement: state.decrement + 1,
  })),
  on(multiplyBySuccess, (state, action) => ({ ...state, value: action.value })),
  on(double, (state) => ({ ...state, value: state.value * 2 }))
);

// Selectors
const selectCounterState = createFeatureSelector("counter");
const selectValue = createSelector(selectCounterState, (state) => state.value);
const selectIncrement = createSelector(
  selectCounterState,
  (state) => state.increment
);
const selectDecrement = createSelector(
  selectCounterState,
  (state) => state.decrement
);

There is an Effect that will handle multiplyBy action but this will be the same for ngrx-slice as well.

Or you can have everything in a Slice

import { createSlice } from 'ngrx-slice';

export interface CounterState {
  value: number;
  incrementCount: number;
  decrementCount: number;
}

export const initialState: CounterState = {
  decrementCount: 0,
  incrementCount: 0,
  value: 0,
};

export const {
  actions: CounterActions,
  selectors: CounterSelectors,
  ...CounterFeature
} = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value++;
      state.incrementCount++;
    },
    decrement: (state) => {
      state.value--;
      state.decrementCount++;
    },
  },
});

Contribution

Contributions welcome

ngrx-slice's Issues

test: add unit tests

ci: add github actions for testings and publishing

When installing dependencies something other than yar, ngrx-slice gives compilation error

Hello,

We are using ngrx-slice in our application and it is a blast!

But we are facing a weird problem. We mainly use yarn, but for some reason, yarn is very slow on our machine, we decided to try npm and pnpm for managing dependencies.

Normally, the code is working fine if we run yarn install. But when we try to install the dependencies, ngrx-slice is giving an error, saying that it can't find the actions and reducers inside the slice.

Here is the code that is using ngrx-slice:

import { createSlice, PayloadAction } from "ngrx-slice";

export interface KullaniciState {
  tcKimlikNumarasi: string;
  hesapAktifMi: boolean;
  kayitliKullaniciMi: boolean;
  yetkiler: string[];
}


export const kullaniciInitialState: KullaniciState = {
  tcKimlikNumarasi: "",
  hesapAktifMi: false,
  kayitliKullaniciMi: false,
  yetkiler: []
};

const slice = createSlice({
  name: "kullanici",
  initialState: kullaniciInitialState,
  reducers: {
    kullaniciBilgileriEkle(state, payload: PayloadAction<KullaniciState>) {
      state.tcKimlikNumarasi = payload.tcKimlikNumarasi;
      state.yetkiler = payload.yetkiler;
      state.hesapAktifMi = payload.hesapAktifMi;
      state.kayitliKullaniciMi = payload.kayitliKullaniciMi;
    }
  }
});

export const KullaniciActions = slice.KullaniciActions;
export const KullaniciSelectors = slice.KullaniciSelectors;
export const KullaniciFeature = slice.KullaniciFeature;

This is a very generic slice, nothing too fancy.

When we compile the code, it is giving me this error, saying that it can't find the KullaniciActions:

Error: apps/tenmak/src/app/store/kullanici-slice/kullanici.slice.ts:31:39 - error TS2339: Property 'KullaniciActions' does not exist on type 'Slice<Record<string, any>, "kullanici", KullaniciState, { kullaniciBilgileriEkle(state: Wr
itableDraft<KullaniciState>, payload: PayloadAction<...>): void; }>'.

31 export const KullaniciActions = slice.KullaniciActions;
                                         ~~~~~~~~~~~~~~~~


Error: kullanici.slice.ts:32:41 - error TS2339: Property 'KullaniciSelectors' does not exist on type 'Slice<Record<string, any>, "kullanici", KullaniciState, { kullaniciBilgileriEkle(state:
WritableDraft<KullaniciState>, payload: PayloadAction<...>): void; }>'.

32 export const KullaniciSelectors = slice.KullaniciSelectors;
                                           ~~~~~~~~~~~~~~~~~~


Error: kullanici.slice.ts:33:39 - error TS2339: Property 'KullaniciFeature' does not exist on type 'Slice<Record<string, any>, "kullanici", KullaniciState, { kullaniciBilgileriEkle(state: Wr
itableDraft<KullaniciState>, payload: PayloadAction<...>): void; }>'.

33 export const KullaniciFeature = slice.KullaniciFeature;
                                         ~~~~~~~~~~~~~~~~

Here is the error whenever I hover over the error in IntelliJ:

The error goes away when we install the dependencies with yarn.

I even managed to reproduce the error, which was surprising. Here is a repository:

https://github.com/fatihdogmus/ngrx-slice-error-repo

Environment:

• Tried on both ubuntu 20 and windows 10, no change
• [email protected](tried with 16.7.0 too, still no change)
• [email protected]