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'))
const myPool = ReactReduxPool(
pool, // @duckness/pool to use with React
renderRootComponent // root component
)
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>
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
https://github.com/hitosu/duckness/tree/master/stories
- @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