reactjs-redux-change-state-in-action-creator-or-reducer

actions.js

import * as ACTION_TYPES from '../constants/action-types'

const action = (type, payload = {}) => ({ type, payload })

const getUsernameSuccess = username =>
  action(
    ACTION_TYPES.GET_USERNAME_SUCCESS, {
      username,
    }
  )
  
export {
  getUsernameSuccess,
}

reducer.js

import * as ACTIONS from '../constants/action-types'

export default function (state = {}, action) {
  const { type, payload } = action
  switch (type) {
    case ACTIONS.GET_USERNAME_SUCCESS:
      return {
        ...state,
        username: payload.username,
        message: 'Anything you want to show here.',
      }
    ...
    default:
      return state
  }
}

saga.js

function * watchGetUsernameRequest () {
  while (true) {
    try {
      const { username } = yield take(ACTION_TYPES.GET_USERNAME)
      yield put(ACTIONS.getUsernameSuccess(username))
    } catch (err) {
      console.error('error occurred', err)
    }
  }
}

export default function * watchUserRegisterFlow () {
  yield [
    fork(watchGetUsernameRequest),
  ]
}