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
redux-segments
?
Why Some of the benefits with redux-segments
:
- minimized the amount of redux boilerplate
- a breeze to use with libraries such as
react
andreselect
- no need for libraries such as
immutablejs
orredux-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