uptrend-redux-modules

Redux Module (redux + redux-saga + redux-saga-thunk) for requesting resources from API and storing response data into entities if provided a normalizr schema.

The problem

// TODO

This solution

// TODO

Installation
Usage
Inspiration
Other Solutions
Contributors
LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

yarn add uptrend-redux-modules

Example Project Usage

Using uptrend-redux-modules requires some ceremony. Below is an example of how one may set it up in a react app using the resource and entities redux-modules.

Do note there are many ways you could organize your project and this example is not strict guidelines by any means.

Resource & Entities

src/store/modules/resource/index.js

// - src/store/modules/resource/index.js
import {createResource} from 'uptrend-redux-modules'

// createResource(...) => { actions, reducers, sagas, selectors }
export default createResource()

src/store/modules/entities/index.js

// - src/store/modules/entities/index.js
import {createEntities} from 'uptrend-redux-modules'
import schemas from './schemas'

// createEntities(...) => { actions, middleware, reducers, sagas, selectors }
export default createEntities({schemas})

src/store/modules/entities/schema.js

// - src/store/modules/entities/schemas.js
import {schema} from 'normalizr'

export const user = new schema.Entity('users')
export const team = new schema.Entity('teams', {owner: user, members: [user]})

src/store/actions.js

// - src/store/actions.js
import {actions as entities} from 'src/store/modules/entities';
import {actions as resource} from 'src/store/modules/resource';

export {
  ...entities,
  ...resource,
}

src/store/middlewares.js

// - src/store/middlewares.js
import {middleware as entities} from 'src/store/modules/entities'

export default [
  // redux-modules middlewares
  entities,
]

src/store/reducers.js

// - src/store/reducer.js
import {combineReducers} from 'redux'

import {reducer as entities} from 'src/store/modules/entities'
import {reducer as resource} from 'src/store/modules/resource'

export default combineReducers({
  entities,
  resource,
})

src/store/sagas.js

// - src/store/sagas.js
import {sagas as entities} from 'src/store/modules/entities'
import {sagas as resource} from 'src/store/modules/resource'

// single entry point to start all Sagas at once
export default function*(services = {}) {
  try {
    yield all([
      // app specific sagas
      example(services),

      // redux-modules sagas
      entities(services),
      resource(services),
    ])
  } catch (error) {
    console.error('ROOT SAGA ERROR!!!', error)
    console.trace()
  }
}

src/store/selectors.js

// - src/store/selectors.js
import {selectors as fromEntities} from 'src/store/modules/entities'
import {selectors as fromResource} from 'src/store/modules/resource'

export {fromEntities, fromResource}

Usage

// TODO

Inspiration

Organizing actions, reducers, selectors, sagas, etc. into a module is based on redux-modules from Diego Haz.

The resource and entities modules specifically are modified version of those found in redux-modules and ARc.js.

Contributors

_{Brandon Orther} 💻 🚇 ⚠️ 💡	_{Dylan Foster} 🐛 🤔

Thanks goes to these people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT

fossabot / uptrend-redux-modules Goto Github PK