redux-actions用法

redux-actions的产生，是为了简化redux的使用。

createAction

• ​Methods​

  • ​createAction​

    • ​createAction(type)​

    • ​createAction(type, payloadCreator)​

    • ​createAction(type, payloadCreator, metaCreator)​

import { createAction } from 'redux-actions';

export const increment = createAction('INCREMENT');
export const decrement = createAction('DECREMENT');

increment(); // { type: 'INCREMENT' }
decrement(); // { type: 'DECREMENT' }
increment(10); // { type: 'INCREMENT', payload: 10 }
decrement([1, 42]); // { type: 'DECREMENT', payload: [1, 42] }

 

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

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

handleAction

• ​Methods​

  • ​handleAction​

    • ​handleAction(type, reducer, defaultState)​

    • ​handleAction(type, reducerMap, defaultState)​

import { handleAction } from 'redux-actions';

handleAction(
  'APP/COUNTER/INCREMENT',
  (state, action) => ({
    counter: state.counter + action.payload.amount
  }),
  defaultState
);

createActions

createActions

• createActions(actionMap[, options])

• createActions(actionMap, ...identityActions[, options])

import { createActions } from 'redux-actions';

createActions({
  ADD_TODO: todo => ({ todo }), // payload creator
  REMOVE_TODO: [
    todo => ({ todo }), // payload creator
    (todo, warn) => ({ todo, warn }) // meta
  ]
});

handleActions

handleActions

• handleActions(reducerMap, defaultState[, options])

import { handleActions } from 'redux-actions';

const reducer = handleActions(
  {
    INCREMENT: (state, action) => ({
      counter: state.counter + action.payload
    }),

    DECREMENT: (state, action) => ({
      counter: state.counter - action.payload
    })
  },
  { counter: 0 }
);

 

官网资料：https://redux-actions.js.org/

参考资料：https://www.jianshu.com/p/d2615a7d725e