README
f1-redux-utils
My utilities for Redux projects.
Install
npm i f1-redux-utils --save
Usage
The module uses ES6 syntax.
Action Creators
A very simple action creation utility.
import { createAction, createActions } from 'f1-redux-utils/actionCreators'
const [act1, act2] = createActions('test1', 'test2')
const act3 = createAction('test3')
Now you can use act1() to create a new action. The parameter will be placed in the "payload" field. It takes an optional error parameter which will be placed in the "error" field.
expect(act1()).to.eql({
type: 'test1'
})
expect(act2('foo')).to.eql({
type: 'test2',
payload: 'foo'
})
expect(act3(null, 'error')).to.eql({
type: 'test3',
error: 'error'
})
Load Action Container
Container wrapper that will trigger an action when it is rendered (in componentWillMount). Use together with connect, for a container that needs to load some data when it is initially loaded.
import { connect } from 'react-redux';
import loadaction from 'f1-redux-utils/loadaction'
const mapStateToProps = state => ({
id: state.location.id
})
const AdminContainer = loadaction({ id } => loadTemplateById(id))(AdminPage);
// take care that the connect() call is after the loadaction call, so that the
// mapped state and actions are available as props within the callback
export default connect(mapStateToProps, adminActions)(AdminContainer);
With the autoConnect parameter an action creator can be passed instead, enabling the connect call to be ommitted. The function will be passed the props.
import { connect } from 'react-redux';
import loadaction from 'f1-redux-utils/loadaction'
const AdminContainer = loadaction(adminActions.loadTemplateById, true)(AdminPage);
Unload Action Container
Equivalent to Load Action Container, for unmount instead of mount.
Handle Prefixed Actions
Helper function to write a reducer that will act on all actions that have a certain prefix. A default state can be provided as well.
This example will handle the PROJECT_LIST_ON_FILTER
action:
const list = handlePrefixedActions('PROJECT_LIST', {
ON_FILTER: (state, action) => ({...state, filter: action.payload })
}, { filter: '' })
It's also possible to use this to handle most prefixed action but some absolute ones by prefixing those with a forward slash:
const list = handlePrefixedActions('PROJECT_LIST', {
ON_FILTER: (state, action) => ({...state, filter: action.payload }),
"/APP_EVENT": (state, action) => ({...state, appDidSomething: true})
}, { filter: '' })