duckness-pooldeprecated

Duckness Pool - boilerplate for React-Redux apps based on duckness-saga

Usage no npm install needed!

<script type="module">
  import ducknessPool from 'https://cdn.skypack.dev/duckness-pool';
</script>

README

THIS PACKAGE IS LEGACY, PLEASE UPDATE TO @duckness/pool

duckness-pool

Duckness Pool - boilerplate for React-Redux apps based on Duckness - Modular Redux Ducks hatchery

npm version Dependency Status devDependency Status

Example

import Pool from 'duckness-pool'
import CounterDuck from './ducks/CounterDuck'

const CounterPool = Pool({
  buildStore: ({ initialCounter = 0 } = {}) => {
    return { counter: initialCounter }
  },
  renderRoot: () => (
    <Suspense fallback="Loading...">
      <App />
    </Suspense>
  )
})
CounterPool.addDuck(CounterDuck)

CounterPool.build({initialCounter: 0})
CounterPool.mount(document.getElementById('counterApp'))

Table of Contents

API

Create Pool

const myPool = Pool({
  ?ducks: Array<Duck>, // array of pool ducks
  ?buildStore: props => store, // build initial store state
  ?buildRootReducer: ducks => rootReducer, // build custom root reducer from ducks instead of default root reducer
  ?buildRootSaga: ducks => rootSaga*, // build custom root saga from ducks instead of default root saga
  renderRoot: props => <AppRoot />, // render pool's root component
})

default buildStore

If not specified store will be set to {}.

default buildRootReducer

Default root reducer will combine all duck root reducers via

ducks.reduce((state, duck) => {
  return duck(state, action)
}, state)

with every duck root reducer wrapped in try/catch returning unmodified state in case of exception inside duck root reducer.

default buildRootSaga

Default root saga will combine all duck root sagas (if exists) wrapped in try/catch restarting duck root saga in case of exception.

.addDuck(duck)

Add duck to pool

myPool.addDuck(myDuck)

.build(props)

Build pool state from some props. props will be passed to buildStore function.

myPool.build({ initialCounter: 0 })

.mount(toElement)

Mount pool to DOM element.

myPool.mount(document.getElementById('my-pool-div'))

.unmount()

Unmount pool from mounted DOM element.

myPool.unmount()

.render(?props)

Return root component wrapped in Redux <Provider>. Useful for testing. Render will build pool store with supplied props if store was not built.

myPool.build({ /*...*/ })
myPool.render()
// => <Provider store={store}>{renderRoot(props)}</Provider>

.start(props, element)

Build store with props and mount pool to element.

myPool.start({ initialCounter: 0 }, document.getElementById('my-pool-div'))

.stop()

Unmount pool and remove Redux store.

myPool.stop()

.errorReporter(reporterFn)

Set exception reporter function. Will also overwrite all added SagaDuck errorReporters.

myPool.errorReporter(error => {
  window.Raven.captureException(error)
})

Examples

https://github.com/hitosu/duckness-pool/tree/master/stories

Additional resources