Redux Actions

Лекция 29

Redux Actions

Redux Actions


npm install redux-actions
      

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());
      

Redux Actions


const decrement = createAction('DECREMENT');

const reducer = handleActions({
  [increment](state) {
    return { counter: state.counter + 1 }
  },
  [decrement](state) {
    return { counter: state.counter - 1 }
  }
}, { counter: 0 });
      

Redux Actions


const { increment, decrement }
    = createActions('INCREMENT', 'DECREMENT');
      

Redux Actions


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 });
      

Redux Actions


const reducer = handleActions({
  [combineActions(increment, decrement)]
      (state, { payload: { amount } }) {
    return {
      ...state,
      counter: state.counter + amount
    };
  }
}, { counter: 0 });
      

Redux Actions - API


createAction(
  type,
  payloadCreator = Identity,
  ?metaCreator
)
      

Redux Actions - API


const updateAdminUser = createAction(
  'UPDATE_ADMIN_USER',
  (updates) => updates,
  () => ({ admin: true })
)

updateAdminUser({ name: 'Foo' })
// {
//   type: 'UPDATE_ADMIN_USER',
//   payload: { name: 'Foo' },
//   meta: { admin: true },
// }
      

Redux Actions - API


createActions(
  actionMap,
  ?...identityActions,
)
      

Redux Actions - API


const { actionOne, actionTwo, actionThree } =
  createActions({
    ACTION_ONE: (key, value) => ({ [key]: value }),

    ACTION_TWO: [
      (first) => [first],
      (first, second) => ({ second })
    ],

}, 'ACTION_THREE');
      

Redux Actions - API


handleAction(
  type,
  reducer | reducerMap = Identity,
  defaultState,
)
      

Redux Actions - API


handleActions(
  reducerMap,
  defaultState,
)
      

Redux Actions - API


combineActions(
  ...types,
)
      

Redux Actions - API


combineActions(
  ...types,
)
      

Redux Actions - Utils


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;
  }, {});
}
      

Redux Actions - Utils


actions('todo', [
  'add',
  'remove',
  'toggle',
  'toggle all',
]);

/*
{
  add: ActionCreator(TODO_ADD),
  remove: ActionCreator(TODO_REMOVE),
  toggle: ActionCreator(TODO_TOGGLE),
  toggleAll: ActionCreator(TODO_TOGGLE_ALL),
}
*/