Provides helper for managing Redux state
Written in Typescript and includes types
More features to come (WIP)
Part of @reduxed utilities for Redux.
Assumes the use of redux-actions and reselect
$ yarn add @reduxed/actionsor
$ npm i -S @reduxed/actionsThe npm package provides a CommonJS build, a UMD build, as well as an AMD build.
Binding your redux store to a component with separate actions props and state props:
import { connect } from '@reduxed/actions'
export default connect(mapStateToProps, mapDispatchToProps)
connect is used the same way as connect from react-redux
state will be accessible in the component via input prop and actions via output props:
export default ({ input, output }) => (
//Component
)
Create wrapper selectors for a named reducer:
- inputs: parent selector, object containing root selector functions
- output: object containing selectors children of parent selector with key: selector name, value: selector function
- */
import { createSelector } from 'reselect'
import { createWrapperSelectors } from '@reduxed/actions'
const getFriend = ({ friend }) => friend
const parentSelector = createSelector(state => state, getFriend)
const selectors = {
getFirstName: ({ firstName }) => firstName,
getLastName: ({ lastName }) => lastName
}
const namedSelectors = createWrapperSelectors(parentSelector, selectors)
const {
getFirstName,
getLastName
} = namedSelectors
Create selectors from state props
import { createSelector } from 'reselect'
import { createSelectors } from '@reduxed/actions'
const getFriend = ({ friend }) => friend
const parentSelector = createSelector(state => state, getFriend)
const props = [
'firstName',
'lastName'
]
const selectors = createSelectors(parentSelector, props)
const {
getFirstName,
getLastName
} = selectors
Create named actions:
import { createActions } from 'redux-actions'
import { createWrapperActions } from '@reduxed/actions'
const creators = createActions('CHANGE_FIRSTNAME', 'CHANGE_LASTNAME')
const wrapperCreators = createWrapperActions(creators, 'best')
const {
changeFirstName,
changeLastName
} = wrapperCreators
Combine actions for use in a reducer:
import { createActions } from 'redux-actions'
import { combineWrapperActions } from '@reduxed/actions'
const creators = createActions('CHANGE_FIRSTNAME', 'CHANGE_LASTNAME')
const combinedActions = combineWrapperActions(creators)
const reducer = handleActions({
[combinedActions]: state => ({ ...state })
}, {})
Create a higher order reducer combining multiple reducers:
import { createActions } from 'redux-actions'
import { createReducer } from '@reduxed/actions'
const {
changeFirstName,
changeLastName
} = createActions('CHANGE_FIRSTNAME', 'CHANGE_LASTNAME')
const reducer = handleActions({
[changeFirstName]: (state, { payload }) => payload
}, {})
const wrapperReducer = createReducer({
[changeLastName]: (state, { payload }) => ({ lastName: payload })
}, {
firstName: 'John',
lastName: 'Doe'
}, {
firstName: {
actions: { changeFirstName },
reducer
}
// could contain other reducers
})
Get initial state from a reducer:
import { createAction } from 'redux-actions'
import { getInitialState } from '@reduxed/actions'
const changeLastName = createAction('CHANGE_LASTNAME')
const reducer = handleActions({
[changeLastName]: (state, { payload }) => ({ lastName: payload })
}, {
lastName: 'Doe'
})
getInitialState(reducer) // => { lastName: 'Doe' }
Create a reducer responding to given named actions:
import { createActions } from 'redux-actions'
import {
createWrapperActions,
createWrapperReducer
} from '@reduxed/actions'
const creators = createActions('CHANGE_FIRSTNAME', 'CHANGE_LASTNAME')
const { changeLastName } = creators
const reducer = handleActions({
[changeLastName]: (state, { payload }) => ({ lastName: payload })
}, {
firstName: 'John',
lastName: 'Doe'
})
const namedActions = createWrapperActions(creators, 'friend')
const namedReducer = createWrapperReducer({ actions: namedActions, reducer })
namedReducer({ lastName: 'Doe' }, namedActions.changeLastName('Dupont')) // => { lastName: 'Dupont' }
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent