Document-v1.md

Redux Modux

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

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
• 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 user module.

// modules/user/index.js

import { createModule } from 'redux-modux'

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

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

const handlers = {
  updateValueUser
}

export default createModule(initialState, handlers)

The output of user module

  import user from './user'

  console.log('User', user)

  // The log is:
  // {
  //   state: reducer
  //   actions: {
  //     updateValueUser: action
  //   }
  // }

How to use a module

createModule return state and actions

State

// modules/index.js

import { combineReducers } from 'redux'
import user from './user'

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

Action

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

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

    this.props.dispatch(user.actions.updateValueUser(userData))
  }

  render() {
    return <button onClick={this.handleClickUpdateUser}>Update User Data</button>
  }
}

export default connect(null)(Home)

Handle Other Action Type

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

Add handleOtherTypes key to handlers parameter.

// modules/user/index.js

import { createModule } from 'redux-modux'

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

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

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

export default createModule(initialState, handlers)