Лекция 29
npm install redux-actions
import { createAction, handleAction }
from 'redux-actions';
const increment = createAction('INCREMENT');
const reducer = handleAction(
increment,
(state, action) => ({
counter: state.counter + 1
}),
{ counter: 0 }
);
...
store.dispatch(increment());
const decrement = createAction('DECREMENT');
const reducer = handleActions({
[increment](state) {
return { counter: state.counter + 1 }
},
[decrement](state) {
return { counter: state.counter - 1 }
}
}, { counter: 0 });
const { increment, decrement }
= createActions('INCREMENT', 'DECREMENT');
const { increment, decrement } = createActions({
'INCREMENT': amount => ({ amount: 1 }),
'DECREMENT': amount => ({ amount: -1 })
});
const reducer = handleActions({
[increment](state, { payload: { amount } }) {
return { counter: state.counter + amount }
},
[decrement](state, { payload: { amount } }) {
return { counter: state.counter + amount }
}
}, { counter: 0 });
const reducer = handleActions({
[combineActions(increment, decrement)]
(state, { payload: { amount } }) {
return {
...state,
counter: state.counter + amount
};
}
}, { counter: 0 });
createAction(
type,
payloadCreator = Identity,
?metaCreator
)
const updateAdminUser = createAction(
'UPDATE_ADMIN_USER',
(updates) => updates,
() => ({ admin: true })
)
updateAdminUser({ name: 'Foo' })
// {
// type: 'UPDATE_ADMIN_USER',
// payload: { name: 'Foo' },
// meta: { admin: true },
// }
createActions(
actionMap,
?...identityActions,
)
const { actionOne, actionTwo, actionThree } =
createActions({
ACTION_ONE: (key, value) => ({ [key]: value }),
ACTION_TWO: [
(first) => [first],
(first, second) => ({ second })
],
}, 'ACTION_THREE');
handleAction(
type,
reducer | reducerMap = Identity,
defaultState,
)
handleActions(
reducerMap,
defaultState,
)
combineActions(
...types,
)
combineActions(
...types,
)
import { createAction } from 'redux-actions';
import { lowerCamelcase } from '../utils/lower-camelcase';
export default (componentName, customActions = []) => {
componentName = componentName
.replace(/ /g, '_')
.toUpperCase();
return customActions.reduce((result, action) => {
result[
lowerCamelcase(action).replace(/ /g, '')
] = createAction(
`${componentName}_${action.replace(/ /g, '_').toUpperCase()}`
);
return result;
}, {});
}
actions('todo', [
'add',
'remove',
'toggle',
'toggle all',
]);
/*
{
add: ActionCreator(TODO_ADD),
remove: ActionCreator(TODO_REMOVE),
toggle: ActionCreator(TODO_TOGGLE),
toggleAll: ActionCreator(TODO_TOGGLE_ALL),
}
*/