Redux Modux

Redux Modux is concept to create the module in redux app for Create reducer, action handler and actions in a single file.

Document for version 1 see

Todo App Demo

Installation:

$ npm install redux-modux --save
$ yarn add redux-modux

Table of Contents

• Source Structure
• Create Module
• How to use a Module
  • State
  • Action
• Default Action handler
• Get action type string
• Handle Other Action Type

App Structure

src
  ...
  |-actions
  |-components
  |-containers
  |-modules
    |-moduleA
    |-moduleB
    |-index.js
  |-store
  ...

Create Module

Create reducer, action handler and actions in a single file with createModule.

Example Create profile module.

// modules/profile/index.js

import { createModule } from 'redux-modux';

const initialState = {
  firstName: '',
  lastName: '',
  age: ''
};

const updateProfileValue = (state, action) => {
  return {
    ...state,
    firstName: action.firstName,
    lastName: action.lastName,
    age: action.age
  };
};

const handlers = {
  updateProfileValue
};

export default createModule({
  moduleName: 'Profile', // Optional (Prefix when console.log  action's type)
  initialState,
  handlers
});

The output of profile module

import profile from './profile';

console.log('Profile', profile);

// The log is:
// {
//   state: reducer
//   updateProfileValue: action
// }

How to use a module

createModule return state and key of actions

State

// modules/index.js

import { combineReducers } from 'redux';
import profile from './profile';

export default combineReducers({
  todo: todo.state,
  profile: profile.state
});

Action

import React from 'react';
import { connect } from 'react-redux';
import profile from '../modules/profile';

class App extends React.Component {
  handleClickUpdateProfile = () => {
    const newProfile = {
      firstName: 'Peter',
      lastName: 'Parker',
      age: '25'
    };

    this.props.dispatch(profile.updateProfileValue(newProfile));
  };

  render() {
    return <button onClick={this.handleClickUpdateProfile}>Update Profile</button>;
  }
}

export default connect(null)(Home);

Default Action handler

import someModule from '../modules/someModule';

dispatch(
  someModule.set({
    key: '',
    value: ''
  })
);

Reset module state to intital state

import someModule from '../modules/someModule';

dispatch(someModule.resetDefault());

Get action type string

You can get action type from action

import someModule from '../modules/someModule';

someModule.updateProfileValue.actionType; // @@reduxAction_moduleName.updateProfileValue

Handle Other Action Type

How to handle action type that is not existing type in the module.

Add handleOtherTypes key to handlers parameter.

// modules/profile/index.js
...

const handlers = {
  updateProfileValue,
  handleOtherTypes: { // Example to handle other action types
    'INITIAL_DATA_FROM_SERVER': (state, action) => state,
    'APP_LOADING': (state, action) => state,
    'APP_ERROR': (state, action) => state,
  }
}

...