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 [email protected]

Uses

• Foto op aluminium
• Foto op glas
• Tuinposter
• foto op canvas