@artemelka/redux-store-injector

redux-store-injector

Utils for redux code-splitting.

Installation

redux-store-injector is available as an npm package.

// with npm
npm i @artemelka/redux-store-injector

// with yarn
yarn add @artemelka/redux-store-injector

Usage

Here is a quick example to get you started.

Store initialization:

import {
  configureStore,
  combineReducers,
  createSlice
} from '@reduxjs/toolkit';
import {
  createInjectorEnhancer
} from '@artemelka/redux-store-injector';
import createSagaMiddleware from 'redux-saga';

const sagaMiddleware = createSagaMiddleware();

const appReducer = createSlice({
   name: 'appLoader',
   initialState: { isLoading: false },
   reducers: {
       setAppLoaderStart: (state) => {
           state.isLoading = true;
       },
       setAppLoaderStop: (state) => {
           state.isLoading = false;
       }
   }
});

const createReducer = (asyncReducers) => combineReducers({
   appLoader: appReducer,
   ...(asyncReducers ? asyncReducers : {})
});

export const appStore = configureStore({
    reducer: createReducer(),
    enhancers: [createInjectorEnhancer({
      createReducer,
      runSaga: sagaMiddleware.run, 
    })],
    middleware: [sagaMiddleware]
});

Inject reducers and sagas

import React from 'react';
import { connect } from 'react-redux';
import { StoreInjectorConsumer } from '@artemelka/redux-store-injector';
import { PageComponent } from './page';
import { pageReducer } from './reducer';
import { getRequestWatcherSaga } from './sagas';

export const Page = (props) => {
    return (
        <StoreInjectorConsumer
            asyncReducers={[{
              name: 'page',
              reducer: pageReducer
            }]}
            asyncSagas={[{
              name: 'GET_REQUEST_WATCHER_SAGA',
              saga: getRequestWatcherSaga
            }]}
            withEjectReducers
        >
            <PageComponent {...props}/>
        </StoreInjectorConsumer>
    );
};