2.9 Create Action Creators For Each Action

Now that you’ve created an action list, it’s time to create action creators.

An action creator is a function that literally creates an action object. In Redux, action creators simply return an action object and pass the argument value if necessary.

changeWheel action creator sample :

const changeWheel = (value) => {
  return {
    type: 'CHANGE_WHEEL',
    value
  }
}

These action creators are passed to the dispatch function as the result value, and the dispatch is executed.

dispatch(changeWheel(size))

The dispatch function can be accessed directly from the store as store.dispatch(), but in most cases it will be accessed using a helper like react-redux’s connect(). We’ll look at connect later.

2.9.1 Create Action.js

Create an index file in the src/actions directory and define action creators as follows:

src/actions/index.js

import { counterDefaultVal } from '../constants/counterDefaultVal';
export const speedUp = (value) => {
  return {
    type: 'SPEED_UP',
    value,
    step: counterDefaultVal.speed.step,
    maxValue: counterDefaultVal.speed.max
  }
}
export const speedDown = (value) => {
  return {
    type: 'SPEED_DOWN',
    value,
    step: counterDefaultVal.speed.step,
    minValue: counterDefaultVal.speed.min
  }
}
export const temperatureUp = (value) => {
  return {
    type: 'TEMPERATURE_UP',
    value,
    step: counterDefaultVal.temperature.step,
    maxValue: counterDefaultVal.temperature.max
  }
}
export const temperatureDown = (value) => {
  return {
    type: 'TEMPERATURE_DOWN',
    value,
    step: counterDefaultVal.temperature.step,
    minValue: counterDefaultVal.temperature.min
  }
}
export const changeClimate = () => {
  return {
    type: 'CHANGE_CLIMATE'
  }
}
export const changeWheel = (value) => {
  return {
    type: 'CHANGE_WHEEL',
    value
  }
}
export const updateStats = () => {
  return {
    type: 'UPDATE_STATS'
  }
}

Because we need default values based on the action creator, we define this constant value in constants/counterDefaultVal under src directory and import it.

src/constants/counterDefaultVal.js

export const counterDefaultVal = {
  speed: {
    title: "Speed",
    unit: "mph",
    step: 5,
    min: 45,
    max: 70
  },
  temperature: {
    title: "Outside Temperature",
    unit: "°",
    step: 10,
    min: -10,
    max: 40
  }
}
import { counterDefaultVal } from '../constants/counterDefaultVal';

export const speedUp = (value) => {
  return {
    type: 'SPEED_UP',
    value,
    step: counterDefaultVal.speed.step,
    maxValue: counterDefaultVal.speed.max
  }
}

export const speedDown = (value) => {
  return {
    type: 'SPEED_DOWN',
    value,
    step: counterDefaultVal.speed.step,
    minValue: counterDefaultVal.speed.min
  }
}

export const temperatureUp = (value) => {
  return {
    type: 'TEMPERATURE_UP',
    value,
    step: counterDefaultVal.temperature.step,
    maxValue: counterDefaultVal.temperature.max
  }
}

export const temperatureDown = (value) => {
  return {
    type: 'TEMPERATURE_DOWN',
    value,
    step: counterDefaultVal.temperature.step,
    minValue: counterDefaultVal.temperature.min
  }
}

export const changeClimate = () => {
  return {
    type: 'CHANGE_CLIMATE'
  }
}

export const changeWheel = (value) => {
  return {
    type: 'CHANGE_WHEEL',
    value
  }
}

export const updateStats = () => {
  return {
    type: 'UPDATE_STATS'
  }
}