redux-inject-reducer-and-saga

💉 redux-inject-reducer-and-saga

Code highly influenced by react-boilerplate with some modifications If you need more informations read react-boilerplate docs they are great.

The library allows us to add reducers and sagas after the store was initialized. Since library wants to be universal and not decide what will be used it allows to use redux-thunk and redux-saga simultaneously. With preference to use redux-saga. The library is set to use immutable but developers can use simple object and arrays as state in reducers. react-router v4 is set and route reducer is included as default reducer.

Install:

yarn add redux-inject-reducer-and-saga

npm install --save-dev redux-inject-reducer-and-saga

Target browsers .babelrc

• adding polyfils is on the library consumer
• IE >= 10
• browsers: ["last 4 versions"]

Usage:

configureStore

Without parameters

• only default route reducer will be initialized

import {configureStore} from "redux-inject-reducer-and-saga";

const store = configureStore();
expect(store.getState()).toMatchSnapshot();
/*
Immutable.Map {
  "route": Immutable.Map {
    "location": null,
  },
}
*/

With reducers parameter

• reducers will be initialized with reducer's initialState

import {configureStore} from "redux-inject-reducer-and-saga";

function staticReducer(state = null) {
 return state;
}

const reducers = {config: staticReducer};
const store = configureStore(reducers);
expect(store.getState()).toMatchSnapshot();
/*
Immutable.Map {
  "route": Immutable.Map {
    "location": null,
  },
  "config": null, // 💉
}
*/

With reducers and initialState parameter

• reducers will be initialized with initialState argument

import {configureStore} from "redux-inject-reducer-and-saga";

function staticReducer(state = null) {
 return state;
}

const reducers = {config: staticReducer};
const initialState = {config: true};
const store = configureStore(reducers, initialState);
expect(store.getState()).toMatchSnapshot();
/*
Immutable.Map {
  "route": Immutable.Map {
    "location": null,
  },
  "config": true, // 💉
}
 */

Inject Reducer and Saga

import React from "react";
import {mount} from "enzyme";
import {compose, bindActionCreators} from "redux";
import {connect} from "react-redux";
import {put, takeLatest} from "redux-saga/effects";
import {configureStore, injectReducer, injectSaga} from "redux-inject-reducer-and-saga";

const getWrappedSagaComponent = prefix => {
  // constants
  const NAME_SEND = `${prefix}/NAME_SEND`;
  const NAME_SET = `${prefix}/NAME_SET`;

  // actions
  const nameSendAction = name => ({
    type: NAME_SEND,
    payload: name,
  });

  const nameSetAction = name => ({
    type: NAME_SET,
    payload: name,
  });

  // reducers
  const reducer = (state = "no-name", {type, payload}) => {
    switch (type) {
      case NAME_SET:
        return payload;
      default:
        return state;
    }
  };

  // sagas
  function* nameSetSaga(action) {
    const name = action.payload;

    yield put(nameSetAction(name));
  }

  function* saga() {
    yield takeLatest(NAME_SEND, nameSetSaga);
  }

  const withReducer = injectReducer({key: `${prefix}/testReducer`, reducer});
  const withSaga = injectSaga({key: `${prefix}/testSaga`, saga});
  const withConnect = connect(
    state => ({name: state.get(`${prefix}/testReducer`)}), // mapStateToProps
    dispatch => bindActionCreators({nameSend: nameSendAction}, dispatch), // mapDispatchToProps
  );

  type Props = {
    name: string,
    nameSend: string => void,
  };

  class Component extends React.Component<Props, any> {
    componentDidMount() {
      this.props.nameSend(`Name ${prefix}`);
    }

    render() {
      return <span>{this.props.name}</span>;
    }
  }

  // prettier-ignore
  return compose(
    withReducer, 
    withSaga, 
    withConnect,
  )(Component);
};


const store = configureStore();

it("component A, with reducer and saga", () => {
  const WrappedComponent = getWrappedSagaComponent("A");

  const component = mount(<WrappedComponent />, {context: {store}});
  expect(store.getState()).toMatchSnapshot();
  /*
  
  Immutable.Map {
    "route": Immutable.Map {
      "location": null,
    },
    "A/testReducer": "Name A", // 💉
  }
  
   */
});

it("component B, with reducer and saga", () => {
  const WrappedComponent = getWrappedSagaComponent("B");

  // store used from previous example
  const component = mount(<WrappedComponent />, {context: {store}});
  expect(store.getState()).toMatchSnapshot();
  /*
  
  Immutable.Map {
    "route": Immutable.Map {
      "location": null,
    },
    "A/testReducer": "Name A",
    "B/testReducer": "Name B", // 💉
  }
  
   */
});

Inject Reducer and use thunk

import React from "react";
import {mount} from "enzyme";
import {compose, bindActionCreators} from "redux";
import {connect} from "react-redux";
import {configureStore, injectReducer, injectSaga} from "redux-inject-reducer-and-saga";

const getWrappedThunkComponent = prefix => {
  // constants
  const NAME_SET = `${prefix}/NAME_SET`;

  const nameSetAction = name => ({
    type: NAME_SET,
    payload: name,
  });

  // reducers
  const reducer = (state = "no-name", {type, payload}) => {
    switch (type) {
      case NAME_SET:
        return payload;
      default:
        return state;
    }
  };

  // thunks
  const nameSendThunk = name => dispatch => dispatch(nameSetAction(name));

  const withReducer = injectReducer({key: `${prefix}/testReducer`, reducer});
  const withConnect = connect(
    state => ({name: state.get(`${prefix}/testReducer`)}), // mapStateToProps
    dispatch => bindActionCreators({nameSend: nameSendThunk}, dispatch), // mapDispatchToProps
  );

  type Props = {
    name: string,
    nameSend: string => void,
  };

  class Component extends React.Component<Props, any> {
    componentDidMount() {
      this.props.nameSend(`Name ${prefix}`);
    }

    render() {
      return <span>{this.props.name}</span>;
    }
  }
  
  // prettier-ignore
  return compose(
    withReducer, 
    withConnect,
  )(Component);
};

it("component C, with reducer and saga", () => {
  const WrappedComponent = getWrappedThunkComponent("C");

  // store used from previous examples
  const component = mount(<WrappedComponent />, {context: {store}});
  expect(store.getState()).toMatchSnapshot();
  /*
  
  Immutable.Map {
    "route": Immutable.Map {
      "location": null,
    },
    "A/testReducer": "Name A",
    "B/testReducer": "Name B",
    "C/testReducer": "Name C", // 💉
  }
  
   */
});

More complex test: https://github.com/marcelmokos/redux-inject-reducer-and-saga/blob/master/src/configureStore.test.js