redux-segments

Writing reducers, action creators and mapping everything to the UI is tedious and time consuming, redux-segments solves this issue by breaking up the redux boilerplate into generic reusable modules.

this is still a work in progress, whats left:

• [ ] make sure the api is solid
• [ ] api docs
• [ ] examples

installation:

npm install --save redux-segments

Why redux-segments?

Some of the benefits with redux-segments:

• minimized the amount of redux boilerplate
• a breeze to use with libraries such as react and reselect
• no need for libraries such as immutablejs or redux-thunk

How does it work, the TL;DR version:

A typical but simplified use case for redux-segments with react-redux-segments:

import {createSegments, createReducer} from 'redux-segments'
import {connect} from 'react-redux-segments'
import {create} from 'redux'

const user = createSegments('user', {
  name: 'John Doe'
})

const store = create(createReducer([user]))

// wrapped in Provider
const MyComponet = ({name, setName}) =>
  <div>
    <h1>{name}</h1>
    <a onClick={setName('Tommy')}>change name</a>
  </div>

export default connect(user)(MyComponet)

Not only will this register user.name in your redux state but this will also create an action creator setName and register the associated reducer in the store. As a bonus the component will only rerender when user.name is changed even though another part of your redux state is updated.

Write a reusable segment type

To get a good understanding of how segment types work, we can recreate the default segment type:

const customType = initialValue => getType => {
  const TYPE_SET = getType('SET')

  return {
    reducer: (state = initialValue, action) => action.type === TYPE_SET
      ? action.value
      : state,
    actions: store => ({
      set: value => {
        store.dispatch({type: TYPE_SET, value})
      }
    })
  }
}

We can now use this type when we register new segments:

createSegments('user', {
  firstName: customType('John'),
  lastName: customType('Doe')
})

License

MIT