2.2.4 • Published 5 years ago

redux-modux v2.2.4

Weekly downloads
60
License
MIT
Repository
github
Last release
5 years ago

Redux Modux

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

npm version build

Document for version 1 see

Todo App Demo

Installation:

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

Table of Contents

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

...
2.2.4

5 years ago

2.2.3

6 years ago

2.2.2

6 years ago

2.2.1

6 years ago

2.2.0

6 years ago

2.1.0

6 years ago

2.1.0-beta.3

6 years ago

2.1.0-beta.2

6 years ago

2.1.0-beta.1

6 years ago

2.1.0-beta.0

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.0.4

6 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago