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 :

Press + to interact
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.

Press + to interact
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

Press + to interact
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

Press + to interact
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'
  }
}