Single action for redux-zero which tries to cover most state change operations.
npm i -g npm
npm i redux-zero
npm i react react-dom
npm i redux-zero-single-action
In your React component, import actions and the action constants required:
import { connect } from 'redux-zero/react'
import actions, {
BOOLEAN_TOGGLE
} from 'redux-zero-single-action'
Connect your component to the store:
<< COMPONENT GOES HERE >>
const mapToProps = ({
propToSet,
}) => ({
propToSet,
})
export default connect(
mapToProps,
actions
)(TestComponent)
Finally use the action in your component:
const TestComponent = ({
singleAction,
propToSet,
}) => (
<div className="container">
<button
onClick={() => singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: GENERAL_SET,
value: 'new'
})}
/>
</div>
)
}
Example folder coming soon.
- GENERAL_SET: default key-value replacement
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: GENERAL_SET,
value: 'new'
})
- GENERAL_APPEND: append value to subkey
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: GENERAL_APPEND,
value: 'new'
})
- GENERAL_DELETE: remove key
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: GENERAL_DELETE,
})
- BOOLEAN_TOGGLE: toggle boolean value
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: BOOLEAN_TOGGLE,
})
- NUMBER_ADD: add number to existing value (if no value, it sets the value as the added number)
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: NUMBER_ADD,
value: 1
})
- NUMBER_MULTIPLY: multiply number to existing value (if no value, it sets the value to 0)
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: NUMBER_MULTIPLY,
value: 8
})
- OBJECT_SPREAD: spread object value into existing object-type key
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: OBJECT_SPREAD,
value: { id: 1 }
})
- ARRAY_PUSH: push valueinto existing array-type key
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: ARRAY_PUSH,
value: 'item
})
- ARRAY_PUSH_UNIQUE: push value into existing array-type key only if item is not present in the array
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: ARRAY_PUSH,
value: 'item'
})
- ARRAY_TOGGLE: push value into existing array-type key if item is not present in the array, otherwise removes it from the array
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: ARRAY_TOGGLE,
value: 'item'
})
- ARRAY_DELETE: removes item from existing array-type key if item is present
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: NUMBER_MULTIPLY,
value: 'item'
})
- ARRAY_DELETE_INDEX: removes item from existing array-type key by index, if index is present
singleAction({
keys: ['propToSet', 'propToSetSubKey', 'propToSetSubSubKey'],
action: NUMBER_MULTIPLY,
value: 8
})
Redux-zero does a great job in simplifying the Redux flow. Having a single action bring an additional simplification, as:
- less actions to connect to components and pass around
- less code
- focus on functions development rather than store actions
Use np to publish the new version to npm.
git add .
git commit -m "Message"
- Add example folder