Wondering what’s next for npm?Check out our public roadmap! »

    async-action-creator

    2.2.5 • Public • Published

    Async action creator (async-action-creator)

    Build Status Coverage Status

    Async actions with steroids for Redux or whatever you want.

    What

    Action creator is a library that helps with handling async actions on redux or similar implementations, giving a couple of methods for dispatching async actions and handling actions status, errors, and responses in a separated reducers so you don't need to hesitate creating a reducer for that.

    How

    // Creating an action
    import {createAction} from 'async-action-creator'
    const myAction = createAction('MY_ACTION')
     
    // Mounting the reducer
    import {REDUCER_NAME, reducer} from 'async-action-creator'
    const rootReducer = combineReducers({
        // All of your reducers
        [REDUCER_NAME]: reducer // Naming is important
    })
     
    // Creating the services
    export default {
      [myAction.TYPE]: {
        action: myAction,
        uri: "https://api.chucknorris.io/jokes/random",
        method: "GET",
        onResolve: response => response.value,
        onReject: error => error.message,
        options: options => ({
          ...options,
          'content-type': 'text'
        })
      },
    };
     
    // Adding the middleware
    import {middleware} from 'async-action-creator'
     
    ...
    createStore(
      rootReducer,
      applyMiddleware(middleware(services))
    )
    ...
     
    // Middleware in action
    dispatch(myAction.run())
     
    // Actions automatically dispatched:
    {type: 'MY_ACTION'}
    {type: 'MY_ACTION_STARTED'}
    {type: 'MY_ACTION_RESOLVED', payload: "Jean-Claude Van Damme once attempted to throw a Chuck Norris Roundhouse Kick. He was immediately arrested for fraud."}
     
    // Dispatching async actions manually
    const mapDispatchToProps = {
        run: myAction.run, // run({foo: 'bar'}) -> {type: MY_ACTION, payload: {foo: 'bar'}}
        start: myAction.start, // start({foo: 'bar'}) -> {type: MY_ACTION_STARTED, payload: {foo: 'bar'}}
        fetch: myAction.fetch, // fetch({foo: 'bar'}) -> {type: MY_ACTION_FETCH, payload: {foo: 'bar'}}
        update: myAction.update, // update({foo: 'bar'}) -> {type: MY_ACTION_UPDATE, payload: {foo: 'bar'}}
        create: myAction.create, // create({foo: 'bar'}) -> {type: MY_ACTION_CREATE, payload: {foo: 'bar'}}
        remove: myAction.remove, // remove({foo: 'bar'}) -> {type: MY_ACTION_REMOVE, payload: {foo: 'bar'}}
        resolve: myAction.resolve, // resolve({foo: 'bar'}) -> {type: MY_ACTION_RESOLVED, payload: {foo: 'bar'}}
        reject: myAction.reject // reject({foo: 'bar'}) -> {type: MY_ACTION_REJECTED, payload: {foo: 'bar'}}
    }
     
    // Getting action status, error and response
    // Using this with this `myAction.resolve({foo: 'bar'})` as the last action dispatched
    const mapStateToProps = state => ({
        status: myAction.getStatus(state), // => 'resolved'
        error: myAction.getError(state), // => undefined
        response: myAction.getResponse(state) // => {foo: 'bar'}
    )}
     
    // Using actions in reducers
    switch (type) {
        case myAction.TYPE: // => 'MY_ACTION'
            return {
                ...state,
                hello: 'me'
            }
        case myAction.STARTED: // => 'MY_ACTION_STARTED'
            return {
                ...state,
                hello: 'cat'
            }
        case myAction.FETCH: // => 'MY_ACTION_FETCH'
            return {
                ...state,
                hello: 'rat'
            }
        case myAction.UPDATE: // => 'MY_ACTION_UPDATE'
            return {
                ...state,
                hello: 'rabbit'
            }
        case myAction.CREATE: // => 'MY_ACTION_CREATE'
            return {
                ...state,
                hello: 'owl'
            }
        case myAction.REMOVE: // => 'MY_ACTION_REMOVE'
            return {
                ...state,
                hello: 'elephant'
            }
        case myAction.RESOLVED: // => 'MY_ACTION_RESOLVED'
            return {
                ...state,
                hello: 'dog'
            }
        case myAction.REJECTED: // => 'MY_ACTION_REJECTED'
            return {
                ...state,
                hello: 'dodo'
            }
        default:
          return state
    }

    Why

    Sometimes you need an action status and you had to create a new reducer just for that, also, this reduces the boilerplate of creating a lot of actions for all your async actions.

    Installation

    yarn add async-action-creator
    // or
    npm install --save async-action-creator

    Tests

    // jest tests
    yarn test
    // jest coverage
    yarn cover

    Contributors

    Simply create a pull request :)

    • Code style: Standard
    • FlowType used

    Thanks

    This project is based on the idea of make-action-creator by @ajchambeaud, and the getStatus and getError implementations to the same library from @pablen.

    License

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    Install

    npm i async-action-creator

    DownloadsWeekly Downloads

    1

    Version

    2.2.5

    License

    MIT

    Unpacked Size

    210 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar