Why do we need to set action creators as arrow functions in this case?

JavaScript
1

Tell us what’s happening:

Hello!

I don’t quite understand why action creators only worked for me when I set them up as arrow functions and not just as a simple object with defined type?

const incAction =  {
    type: INCREMENT
};

would not work for me.

Your code so far


const INCREMENT = 'INCREMENT'; // define a constant for increment action types
const DECREMENT = 'DECREMENT'; // define a constant for decrement action types

const counterReducer = (state = 0, action) => {
switch (action.type) {
    case INCREMENT:
        return state += 1;
    case DECREMENT:
        return state -= 1;
    default:
        return state;
}
}; // define the counter reducer which will increment or decrement the state based on the action it receives

const incAction = () => {
return {
    type: INCREMENT
};
}; // define an action creator for incrementing

const decAction = () => {
return {
    type: DECREMENT
};
}; // define an action creator for decrementing

const store = Redux.createStore(counterReducer); // define the Redux store here, passing in your reducers

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36.

Challenge: Write a Counter with Redux

Link to the challenge:

2

The challenges ask you to write an action creator which is different from an plain action.

In the redux docs, actions are defined as:

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch() .

And action creators are defined as:

Action creators are exactly that—functions that create actions. It’s easy to conflate the terms “action” and “action creator”, so do your best to use the proper term.

The challenge you are referring to asks you to create an action creator, that’s why it needs to be a function. It doesn’t need to be an arrow function though.

1 Like
3

Thank you! @YgorSilva