magic-redux-generator

Simple component for generate redux actions/reducer

Component in development. I accept suggestions.

Installation

For install: npm install magic-redux-generator --save

Instance methods

fetchItem

| Prop name | Type | Description | Example | |--------------|----------|----------------------------------------|------------| | urlExtension | String | Url sufix | "/id" | | queryParams | Object | Query url params | {limit:15} | | responseType | String | WS response sufix | "users" | | preDispatch | Function | Function to execute before do dispatch | () => {} | | postDispatch | Function | Function to execute after do dispatch | () => {} |

fetch

| Prop name | Type | Description | Example | |---------------|----------|----------------------------------------|------------| | urlExtension | String | Url sufix | "/5" | | queryParams | Object | Query url params | {limit:15} | | responseType | String | WS response sufix | "users" | | responseTotal | String | WS response total sufix | "total" | | preDispatch | Function | Function to execute before do dispatch | () => {} | | postDispatch | Function | Function to execute after do dispatch | () => {} |

create

| Prop name | Type | Description | Example | |--------------|----------|---------------------------------------|-----------------------------------| | data | Object | Object with create data | {username:example, password:1234} | | urlExtension | String | Url sufix | "/users" | | queryParams | Object | Query url params | {limit:15} | | postDispatch | Function | Function to execute after do dispatch | () => {} |

update

| Prop name | Type | Description | Example | |--------------|----------|---------------------------------------|-----------------------------------------| | data | Object | Object with update data | {id:3, username:example, password:1234} | | urlExtension | String | Url sufix | "/3" | | queryParams | Object | Query url params | {limit:15} | | postDispatch | Function | Function to execute after do dispatch | () => {} |

delete

| Prop name | Type | Description | Example | |--------------|----------|---------------------------------------|------------| | urlExtension | String | Url sufix | "/3" | | queryParams | Object | Query url params | {limit:15} | | postDispatch | Function | Function to execute after do dispatch | () => {} |

deleteRows

| Prop name | Type | Description | Example | |------------------|----------|--------------------------------------------|------------| | urlExtension | String | Url sufix | "/3" | | queryParams | Object | Query url params | {limit:15} | | postDispatchItem | Function | Function to execute after delete each item | () => {} | | postDispatchAll | Function | Function to execute after delete all items | () => {} |

More instance methods

| Instance method | Description | Example | |-----------------|--------------------------------|-------------------------------------| | setList | Set the reducer list value | dispatch(actions. setList([])) | | setItem | Set the reducer item value | dispatch(actions.setItem({})) | | setTotal | Set the reducer total value | dispatch(actions.setTotal(32)) | | setFetching | Set the reducer fetching value | dispatch(actions.setFetching(true)) |

Project Example

You can check this component with this project example for react-native.

git clone https://github.com/luisfuertes/testMagicReduxGenerator
cd projectDir && npm install
react-native run-ios

Basic usage

Import: import reduxGenerator from 'magic-redux-generator'

Important: Set Authorization token (only on init): reduxGenerator.webservices.configureToken(yourToken)

Actions.js basic example:

import reduxGenerator from 'magic-redux-generator'

let baseUri = mainUrl + '/users'
let actions = reduxGenerator.createActions(baseUri, 'users')
let types = reduxGenerator.createTypes('users')

//Add custom actions
export default {
  ...actions,

  types,

  yourCustomAction: () => {
    return (dispatch, getState) => {
      ...
      let item = extraData
      dispatch(actions.setItem(item))
    }
  },
}

Reducer.js example:

import reduxGenerator from 'magic-redux-generator'

let userReducer = createReducer('users')
export default userReducer.reducer

Usage example:

Dispatch action:

import actions from './Actions.js'

dispatch(actions.fetch({offset: 0, limit: 10}, 'users'))

And in mapStateToProps:

list: state.users.list,

Error reducer example:

import reduxGenerator from 'magic-redux-generator'
const users = reduxGenerator.createTypes('users')//One per action/reducer generate with reduxGenerator

const initialState = {
  type: null,
  error: null,
};

export default function errorReducer(state = initialState, action = {}) {
  switch (action.type) {

    case users.ACTIONS_ERROR:
      return {
        ...state,
        type: users.ACTIONS_ERROR,
        error: action.error,
      };

    case 'REMOVE_ERROR':
      return {
        ...state,
        error: null,
        type: null,
      };

    default:
      return state;
  }
}