2.1.0 • Published 5 years ago

redux-service-middleware v2.1.0

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

Redux-Service-Middleware

Redux Service Middleware enables simple to integrate webservice call easily through Redux.

First we need to define the service configuration

Here is the sample

const config = {
    baseConfig:{
        baseURL: 'https://example.com',
        headers:{'content-type':'application/json'},
        timeout: 10000,
    },
    serviceConfig:{
        POST_DATA:{
            method:'GET',
            url:'/posts'
        }
    }
}
  • baseConfig - define the basic web service configuartion
  • serviceConfig - collection of object in which each object define redux action as key and the web service details as value

Additional features

  • Third party dependency injection
  • validate the action before dispatch
  • async dispatch( similar to thunk)
  • promise payload
  • dependency injection on validate, process and payload

Middleware usage

Defining the middleware

const store = createStore(
    reducer,applyMiddleware(dataService({config, dependencies})));
})

Define the redux action

example 1

const getPostData = () =>({
    type:'POST_DATA',
    validate({dispatch, accept, reject }){
        if(check){
            accept();
        } else {
            reject();
        }
    },
    process({dispatch}){
        dispatch({ type:"TEST_DATA"})
    },
    complete({ dispatch, resposne, error }){
        console.log(response)
    }
    payload:{
        userId:45666
    }
})

example 2
Dependency Injection on process, validate and payload

const getPostData = () =>({
    type:'POST_DATA',
    validate({dispatch, accept, reject, uuid }){
        if(check){
            accept();
        } else {
            reject();
        }
    },
    process({dispatch, uuid }){
        dispatch({ type:"TEST_DATA", payload:{uuid}})
    },
    payload({ uuid }){
         return {uuid};
    }
})
  • Internaly this middleware uses axios as httpclient
  • Currently it supports REST GET and POST method
  • Pass parms - GET/ body - POST or PUT in payload as object

Given a single action with an async payload, the middleware transforms the action to a separate a pending action and a separate fulfilled/rejected action, representing the states of the async action.

Varghese John:

License

Code licensed with the MIT License (MIT).

2.1.0

5 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago