Redux Boot Save

Modular Redux bootstrap with asynchronous side-effects.

Project README

Redux Boot

Modular Redux bootstrap with asynchronous side-effects.

Build Status sponsored by Taller

What is Redux Boot?

Minimal Framework using Redux to develop modularized universal (backend and frontend) applications, based on functional programming paradigms and friends such as Map and Reduce, Immutability and Reactive programming.

"Simplicity is the ultimate sophistication." -- Leonardo da Vinci

What Redux Boot provides?

  • Module API - Clean organization and reuse patterns for your code.
  • Async side-effects - No-brainer async side-effects with redux-actions and redux-promise.

Examples:

Documentation

For more details see the documentation.

Getting started

Install

npm install redux-boot --save

Basic Usage

import boot, {BOOT} from 'redux-boot'

const initialState = {
  foo: 'bar'
}

const testModule = {
  reducer: {  
    [BOOT]: (state, action) => {
      return {
        ...state,
        foo: 'baz'
      }
    }
  }
}

const modules = [
  testModule
]

const app = boot(initialState, modules)

app.then(({action, store}) => {

  // Should print 'baz'.
  console.log(store.getState().foo)
})

Sync middleware (with redux-actions)

import boot, {BOOT} from 'redux-boot'
import {createAction} from 'redux-actions'

const CHANGE_FOO = 'redux-boot/test/CHANGE_FOO'

const changeFoo = createAction(CHANGE_FOO)

const initialState = {
  foo: 'bar'
}

const testModule = {
  reducer: {
    [CHANGE_FOO]: (state, action) => {
      return {
        ...state,
        foo: action.payload
      }
    }
  },

  middleware: {
    [BOOT]: store => next => action => {
      store.dispatch(changeFoo('baz'))
      return next(action)
    }
  }
}

const modules = [
  testModule
]

const app = boot(initialState, modules)

app.then(({action, store}) => {

  // Should print 'baz'.
  console.log(store.getState().foo)
})

Async middleware (with redux-action and redux-promise)

import boot, {BOOT} from 'redux-boot'
import {createAction} from 'redux-actions'

const CHANGE_FOO = 'redux-boot/test/CHANGE_FOO'

const changeFoo = createAction(CHANGE_FOO, async (value) => {

  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(value), 1)
  })
})

const initialState = {
  foo: 'bar'
}

const testModule = {
  reducer: {
    [CHANGE_FOO]: (state, action) => {
      return {
        ...state,
        foo: action.payload
      }
    }
  },

  middleware: {
    [BOOT]: store => next => async action => {
      const result = next(action)
      await store.dispatch(changeFoo('baz'))
      return result
    }
  }
}

const modules = [
  testModule
]

const app = boot(initialState, modules)

app.then(({action, store}) => {

  // Should print 'baz'.
  console.log(store.getState().foo)
})

Development setup:

Install

git clone https://github.com/choko-org/redux-boot.git
npm install

Build

npm run build

Build and Run the tests

npm test

License

MIT

Open Source Agenda is not affiliated with "Redux Boot" Project. README Source: choko-org/redux-boot
Stars
126
Open Issues
11
Last Commit
6 years ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating