Nanotechnology Promises Much

    redux-inject-reducer-and-saga

    7.0.0 • Public • Published

    💉 redux-inject-reducer-and-saga

    npm version styled with prettier Build Status Coverage Status dependency devDep Known Vulnerabilities

    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

    Install

    npm i redux-inject-reducer-and-saga

    DownloadsWeekly Downloads

    66

    Version

    7.0.0

    License

    MIT

    Unpacked Size

    381 kB

    Total Files

    50

    Last publish

    Collaborators

    • marcelmokos