redux-boss
v1.2.2
Published
Utility to write expressive redux actions.
Downloads
2
Readme
Example
fetchUsers.js
import axios from 'axios'
import Action from 'redux-boss'
import { toast } from 'react-toastify'
export default new Action(
'FETCH_USERS', (branch) => async (emit, getState) => {
emit('start', branch)
const { data: users } = await axios.get(
'https://myserver.com/users',
{ params: { branch } }
)
emit('finish', { branch, users })
}
)
.on('start', function (branch) {
this.toastId = toast(`Fetching users for branch '${branch}'.`, { autoClose: false })
})
.on('finish', function ({ branch }) {
toast.update(this.toastId, {
render: `Fetched users for branch '${branch}'.`,
type: toast.TYPE.INFO,
autoClose: 3000
})
})
.on('finish', 'Users', function (Users, { branch, users }) {
return Users.set(branch, users)
})
.seal()
myComponent.js
import React from 'react'
import { connect } from 'react-redux'
import fetchUsers from './fetchUsers'
const Component = ({ fetchUsers }) => (
<React.Fragment>
<button onClick={() => fetchUsers('engineering')}>
Engineering
</button>
<button onClick={() => fetchUsers('management')}>
Management
</button>
</React.Fragment>
)
export default connect(null, { fetchUsers })(Component)
store.js
import { createStore } from 'redux'
import { createReducer } from 'redux-boss'
import createDefaultStore from './defaultStore'
import middleware from './middleware'
export default createStore(createReducer(createDefaultStore), middleware)