Actions

action.type is a constant we need to export if the action is

• excessively reused in saga
• shared cross projects
• to be tested under TDD

Action is actually just an object with { type, optional_param }

Action creators

It is a function to product action for dispatch

Design principle: All mapDispatchToProps are action creators

• All mapDispatchToProps are bindActionCreators(actionCreator, dispatch)

import { updateSearchKeyword } from '../actions';
import { bindActionCreators as bind } from 'redux'

const LocationSearch = ({updateSearchKeyword}) => (
    <button onClick={() => updateSearchKeyword('haha')}>Update as haha </button>
)

const mapDispatchToProps = (dispatch, ownProps) => ({
    updateSearchKeyword: bind(updateSearchKeyword, dispatch)
})

export default connect(null, mapDispatchToProps)(LocationSearch);

• And if all actions are action creators, we may simply...

import * as actions from '../actions';

const LocationSearch = ({updateSearchKeyword}) => (
    <button onClick={() => updateSearchKeyword('haha')}>Update as haha </button>
)

export default connect(null, actions)(LocationSearch);

• In case you need rename...

import * as actions from '../actions';

const LocationSearch = ({onClick}) => (
    <button onClick={() => onClick('haha')}>Update as haha </button>
)

let _actions = { ...actions, onClick: actions.updateSearchKeyword }

export default connect(null, _actions)(LocationSearch);

Design principle: Naming with prefix

• Actions are commonly divided into two types
  • Initiative: showItemDetail, startUserLoginFlow, resetShoppingCart
  • Accumulative: updateAccountEmail, refreshVodList, toggleBookmark, changeProfilePicture