@duckness/react-redux-pool

@duckness/pool + React-Redux

Example

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import Pool from '@duckness/pool'
import ReactReduxPool from '@duckness/react-redux-pool'

import CounterDuck from './ducks/CounterDuck'

const App = React.lazy(() => import('./components/App'))

function RootComponent() {
  return (
    <Suspense fallback="Loading...">
      <App />
    </Suspense>
  )
}

const CounterPool = ReactReduxPool(
  Pool({
    buildStore: ({ initialCounter = 0 } = {}) => {
      return { counter: initialCounter }
    }
  }),
  RootComponent
)
CounterPool.addDuck(CounterDuck)

ReactDOM.render(CounterPool.render(), document.getElementById('counterApp'))

Table of Contents

• Example
• API
  • Create ReactReduxPool
  • .render()
  • Pool methods
• Examples
• @Duckness packages:

API

Create ReactReduxPool

const myPool = ReactReduxPool(
  pool, // @duckness/pool to use with React
  renderRootComponent // root component
)

.render()

Return root component wrapped in Redux <Provider>. Render will build pool store if store was not built.

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

Pool methods

ReactReduxPool forward Pool calls to included Pool

const myPool = Pool()
const myReactReduxPool = ReactReduxPool(myPool, () => null)

myReactReduxPool.addDuck
// => myPool.addDuck
myReactReduxPool.build
// => myPool.build
myReactReduxPool.store
// => myPool.store
myReactReduxPool.setErrorReporter
// => myPool.setErrorReporter

Examples

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

@Duckness packages:

• @duckness/duck - Modular Redux Ducks hatchery
• @duckness/saga - Redux Saga extension for @duckness/duck
• @duckness/epic - Redux-Observable extension for @duckness/duck
• @duckness/pool - @duckness/duck + Redux
• @duckness/pool-saga-stream - @duckness/saga plugin for @duckness/pool
• @duckness/pool-epic-stream - @duckness/epic plugin for @duckness/pool
• @duckness/react-redux-pool - @duckness/pool + React-Redux
• @duckness/use-redux - React hook for Redux store
• @duckness/use-pool - React hook for @duckness/pool.
• @duckness/store - simple store for React components
• @duckness/reactor - reactive data flow builder