dynn-redux

1.0.1 • Public • Published

dynn-redux

Redux helpers, middleware, enhancers and other goodies

install instructions

  • Make sure you got Node.js and NPM installed
  • Navigate to your project directory with cd
  • Run npm install dynn-redux
  • Pet yourself on your shoulder, you just installed dynn-redux

usage instructions

Best way to explain is some hot example code.

// lets import our goodies, if you are an es6 hero you know what to do
const { createActionHandlers, createActionCreator, createReducer, createPromise, promiseMiddleware } = require('dynn-redux')
 
// obviously we are going to import the Redux as well
const { createStore, applyMiddleware } = require('redux')
 
// I got a secret crush on Ramda, don't tell
const { assoc } = require('ramda')
 
// time to define some action creators
// first the sync ones
const add = createActionCreator((value) => ({ type: 'ADD', payload: value}))
const error = createActionCreator((error) => ({ type: 'ERROR', payload: error}))
 
// also let's get funky we are going to setup an async action creator
const addAsync = createActionCreator((value) => ({
  type: 'ADD_ASYNC',
  // yeah baby, we have a promise in our payload 
  payload: createPromise((resolve, reject) => {
    // lets use setTimeout to fully live the async dream
    setTimeout(() => {
      // a little bit of logic
      if (typeof value === number) {
        // okay we got what we wanted, now resolve with an other action
        resolve(add(value))
      } else {
        // we didn't got a number... reject with an appropiate action
        reject(error('we should have gotten a number instead'))
      }
    // 1 second delay  
    }, 1000)
  })
})
 
// we cant do shit without an fancy reducer, here we go!
const actionHandler = combineActionHandlers(
  // yeah we are doing it, we are going to combine multiple actionHandlers
  // actionHandlers take an actionType and a reduce function
  createActionHandler('ADD', (state, action) => assoc('counter', state.counter + action.payload, state)),
  // we are going to take care of the ERROR actiontype as well
  createActionHandler('ERROR', (state, action) => assoc('error', action.payload, state))
)
 
// we are almost ready to create the reuder, first lets declare some initial state
const initState = {counter: 0, error: false}
 
// rise reducer, RISE! 
const reducer = createReducer(initState, actionHandler)
 
// ok, we have all the pieces, lets boot up the store
const store = createStore(reducer, initState, applyMiddleware(promiseMiddleware))
 
// the state within the store should look like this now
{ counter: 0, error: false }
 
// just use your usual way of dispatching on your store, as that is with react-redux or something more exotic
store.dispatch(addAsync(1))
 
// after 1 second your state will look like
{ counter: 1, error: false }
 
// if we now mess up some way like this
store.dispatch(addAsync('Messing up'))
 
// after another second our state in our store would look like this here
{ counter: 1, error: 'we should have gotten a number instead' }

testing

  • clone the repo
  • cd into it
  • run npm test, tests should automaticly rerun on file changes

contributing, requests, questions, everything else

I would love to see your issue or pull request.

contributors

Frank van Vuuren frank@dynngroup.com

Uses

Package Sidebar

Install

npm i dynn-redux

Weekly Downloads

2

Version

1.0.1

License

MIT

Last publish

Collaborators

  • frankvanvuuren