Redux common stores

Reusable Redux (RTK) stores

Installation

You can install it by npm package.

// With npm
npm install @sigeo/redux-common-stores

// With yarn
yarn add @sigeo/redux-common-stores

Configuration

Each store export a function that accept an object with this DTO:

• name: optional string rappresenting the name of the store, or a default name if is not setted
• customReducers: optional object of reducers extending reducers setted by each store
• Any others parameters accepted by createSlice RTK function

It return a createSlice object with different actions (see store documentation)

Stores

• Basic
• Alerts

Basic

The basic store is a store that have this DTO:

• isLoading boolean value
• items generic array

It return a createSlice object with this actions:

• start:
  • Not accept a payload
  • Set isLoading to true
• success
  • Accept a payload
  • Set isLoading to false
  • Set items to payload value
• fail
  • Not accept a payload
  • Set isLoading to false
• reset
  • Not accept a payload
  • Reset the store with initial values

import { basic } from "@sigeo/redux-common-stores"
// import basic from "@sigeo/redux-common-stores/dist/basic"

const myStore = basic({
  name: 'myStore',
  customReducers: {
    consoleStore: (state, action) => {
      console.log(state, action)
    }
  },
  extraReducers: {
    'auth/logout': (state, action) => {
      state.items = []
    }
  }
})

const { start, success, consoleStore, reset } = myStore
const store = ...

store.dispatch(start())
store.dispatch(success(['Marco', 'Cante']))
store.dispatch(consoleStore())
store.dispatch(reset())
store.dispatch(consoleStore())

Alerts

The alerts store is a store that have this DTO:

• items generic array

It return a createSlice object with this actions:

• addAlert:
  • Accept a generic payload with an id property
  • Add payload to items array
• deleteAlert
  • The payload is a number rappresenting the id of an item
  • Remove the item from items list
• reset
  • Not accept a payload
  • Reset the store with initial values

import { alerts } from "@sigeo/redux-common-stores"
// import alerts from "@sigeo/redux-common-stores/dist/alerts"

const myStore = alerts({
  customReducers: {
    consoleStore: (state, action) => {
      console.log(state, action)
    }
  }
});

const { addAlert, deleteAlert, consoleStore, reset } = myStore
const store = ...

store.dispatch(addAlert(
  {
    id: 1,
    name: 'Marco'
  },
  {
    id: 2,
    name: 'Pietro'
  }
))
store.dispatch(consoleStore())
store.dispatch(deleteAlert(1))
store.dispatch(consoleStore())
store.dispatch(reset())
store.dispatch(consoleStore())

A real use case

In CFA project, we had a lot of basic stores, such regioni or province. Look here:

import { createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

import { logout } from 'stores/authentication';

const initialState = {
  isLoading: false,
  items: []
};

const provinceSlice = createSlice({
  name: 'province',
  initialState,
  reducers: {
    getProvinceStart(state) {
      state.isLoading = true;
    },
    getProvinceSuccess(state, { payload }) {
      state.isLoading = false;
      state.items = payload.data;
    },
    getProvinceFailed(state) {
      state.isLoading = false;
    },
    reset() {
      return initialState;
    }
  },
  extraReducers: {
    [logout]() {
      return initialState;
    }
  }
});

export const {
  getProvinceStart,
  getProvinceSuccess,
  getProvinceFailed,
  reset
} = provinceSlice.actions;
export default provinceSlice.reducer;

export const getProvince = (params = {}) => (dispatch) => {
  dispatch(getProvinceStart());

  return axios
    .get('/province', { params })
    .then((res) => dispatch(getProvinceSuccess(res.data)))
    .catch(() => dispatch(getProvinceFailed()));
};

Using basic function, the store is much simpler:

import axios from 'axios';
import { basic } from '@sigeo/redux-common-stores';

import { logout } from 'stores/authentication';

const slice = basic({
  name: 'province',
  extraReducers: {
    [logout](state) {
      state.items = [];
    }
  }
});

export const { start, success, fail, reset } = slice.actions;
export default slice.reducer;

export const getProvince = (params = {}) => (dispatch) => {
  dispatch(start());

  return axios
    .get('/province', { params })
    .then((res: any) => dispatch(success(res?.data)))
    .catch(() => dispatch(fail()));
};

License

Copyright © 2020 Sigeo S.R.L

Licensed under a GPL3+ license: http://www.gnu.org/licenses/gpl-3.0.txt