redux-segments v0.1.3
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
reactandreselect - no need for libraries such as
immutablejsorredux-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