Package Exports

react-combine-reducers

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-combine-reducers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Combine Reducers

This module contains a handy combineReducers function to use in conjunction with the React hook useReducer.

You may use it with JavaScript or TypeScript.

Installation

Install the dependency using the following command:

npm install react-combine-reducers

If using typescript, you can also install the types:

npm install @types/react-combine-reducers

Usage

Once installed, import the helper function and use it like so:

  import { useReducer } from 'react';
  import combineReducers from 'react-combine-reducers';

  const [reducerCombined, initialStateCombined] = combineReducers({
    reducerOne: [reducerOne, initialStateOne],
    reducerTwo: [reducerTwo, initialStateTwo],
    // ...
  });

To avoid the initial instantiation call you can use the useCallback hook from react

  import { useReducer, useCallback } from 'react';
  import combineReducers from 'react-combine-reducers';

  const [reducerCombined, initialStateCombined] = useCallback(
    combineReducers({
      reducerOne: [reducerOne, initialStateOne],
      reducerTwo: [reducerTwo, initialStateTwo],
      // ...
    }), 
    [reducerCombined, initialStateCombined]
   );

Working Javascript Example

  import { useReducer } from 'react';
  import combineReducers from 'react-combine-reducers';

  const initialIdentity = {
    name: 'Harry'
  }

  const initialLocation = {
    country: 'UK',
    city: 'London'
  }

  const identityReducer = (state, action) => {
    switch (action.type) {
      case 'ACTION_A':
        return { ...state, name: 'Puli' };
      default: return state;
    }
  }

  const locationReducer = (state, action) => {
    switch (action.type) {
      case 'ACTION_B':
        return { ...state, city: 'Manchester' };
      default: return state;
    }
  }

  const [profileReducer, initialProfile] = combineReducers({
    identity: [identityReducer, initialIdentity],
    location: [locationReducer, initialLocation]
  });

  const [state, dispatch] = useReducer(profileReducer, initialProfile);

  console.log(state);
  // Outputs the following state:
  // {
  //   identity: {
  //     name: "Harry"
  //   },
  //   location: {
  //     country: "UK",
  //     city: "London"
  //   }
  // }

Working Typescript Example

  import { useReducer } from 'react';
  import combineReducers from 'react-combine-reducers';

  type Identity = {
    name: string;
  };

  type Location = {
    country: string;
    city: string;
  };

  type ProfileState = {
    identity: Identity;
    location: Location;
  };

  type Action = {
    type: string;
    payload: any;
  };

  type ProfileReducer = (state: ProfileState, action: Action) => ProfileState;

  const initialIdentity: Identity = {
    name: 'Harry'
  };

  const initialLocation: Location = {
    country: 'UK',
    city: 'London'
  };

  const identityReducer = (state: Identity, action: Action) => {
    switch (action.type) {
      case 'ACTION_A':
        return { ...state, name: 'Puli' };
      default:
        return state;
    }
  };

  const locationReducer = (state: Location, action: Action) => {
    switch (action.type) {
      case 'ACTION_B':
        return { ...state, city: 'Manchester' };
      default:
        return state;
    }
  };

  const [profileReducer, initialProfile] = combineReducers<ProfileReducer>({
    identity: [identityReducer, initialIdentity],
    location: [locationReducer, initialLocation]
  });

  const [state, dispatch] = useReducer<ProfileReducer>(
    profileReducer,
    initialProfile
  );

  console.log(state);
  // Outputs the following state:
  // {
  //   identity: {
  //     name: "Harry"
  //   },
  //   location: {
  //     country: "UK",
  //     city: "London"
  //   }
  // }

Issues:

If you find a bug, please file an issue on our issue tracker on GitHub.

Give us a star if this helped you! Cheers!