redux-action

redux-action

import { createAction, createReducer } from 'redux-action'

• Uses dispatch with Promise chain
• Generates action type automatically when no pass action type
• payload first reducer
• Assign updated data to state automatically
• Works with redux-thunk

APIs

• createAction

import { createAction } from 'redux-action'
 
const action = createAction('action', (...args) => {
  // ...
  return payload
})
 
const asyncAction = createAction('async action', (...args) => {
  // ...
  return Promise.resolve(payload)
})

• createReducer

import { createReducer } from 'redux-action'
 
const reducer = createReducer(defaultState, {
  'action': (payload, state, action) => {
    // ...
    // only return updated state
    // will assign to state automatically
    return updatedData
  },
 
  'async action': (payload, state, action) => {
    // ...
    return updatedData
  },
 
  'common usage': payload => ({some: payload}),
})

• Uses dispatch with Promise

class App extends React.Component {
  async updateData(data) {
    const {
      dispatch,
      userId 
    } = this.props
 
    await dispatch(updateUserInfo(userId, data))
    await dispatch(getUserInfo(userId))
    // ...
  }
 
  render() {
    // ...
  }
}

Full example

• store.js

 
import { createStore, applyMiddleware } from 'redux'
import reduxThunk from 'redux-thunk'
import reducer from './reducer'
 
const createStoreWithMiddleware = applyMiddleware(
  reduxThunk
)(createStore)
 
const store = createStoreWithMiddleware(reducer)
 
export default store
 

• action.js

 
import { createAction } from 'redux-action'
 
export const setUserStatus = createAction('set user status', status => status)
export const getUserInfo = createAction('get user info', () => Promise.resolve(userInfo))

• reducer.js

 
import { createReducer } from 'redux-action'
import { combineReducers } from 'redux'
 
const defaultState = {
  status: 'normal',
  info: {},
}
 
const user = createReducer(defaultState, {
  'set user status': status => ({status}),
  'get user info': info => ({info}),
})
 
// combine reducers
 
const rootReducer = combineReducers({
  user,
})
 
export default rootReducer

Auto generated action type

createAction also can generate a unique type, when no pass any string in the first argument.

• action.js

 
import { createAction } from 'redux-action'
 
export const setUserStatus = createAction(status => status)
export const getUserInfo = createAction(() => Promise.resolve(userInfo))

• reducer.js

 
import { createReducer } from 'redux-action'
 
import {
  setUserStatus,
  getUserInfo
} from './action'
 
const defaultState = {
  status: 'normal',
  info: {},
}
 
const user = createReducer(defaultState, {
  [setUserStatus]: status => ({status}),
  [getUserInfo]: info => ({info}),
})
 

See also

• gaearon/redux-thunk

License

MIT