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

set

import someModule from '../modules/someModule';
 
dispatch(
  someModule.set({
    key: '',
    value: ''
  })
);

resetDefault

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,
  }
}
 
...