Redux: Define a Redux Action
Tags: javascript, devops, beginners, redux
Published: 2021-11-28 15:48:03

* Updating state is one of Redux core tasks. In Redux, all state updates are triggered by dispatching actions. Think of Redux actions as messengers that deliver information about events happening in your app to the Redux store. The store then conducts the business of updating state based on the action that occurred.
* For example, the action carries a username after a user logs in, actions must carry a `type` property that specifies the 'type' of action that occurred.
* Here we have to write a Redux action as simple as declaring an object with a type property. Declare an object `action` and let's give it a property `type` set to the string `'LOGIN'`.
* Answer:
```React
const action = {
  type: 'LOGIN'
}
```

### Define an Action Creator
* After we have created an action. The next step is to send the action to the redux store so it can update its state. An action creator is simply a JavaScript function that returns an action. 
* Let's define a function named `actionCreator()` that returns the action object when called.
* Code:
```React
const action = {
  type: 'LOGIN'
}
```

* Answer:
```React
function actionCreator() {
  return action;
}
```

###Dispatch an Action Event
* Dispatch method is what you use to dispatch actions to the Redux store. Calling `store.dispatch()` and passing the value returned from an action creator sends an action back to the store.
* Like the above post, action creators return an object with a type property that specifies the action that has occurred. Then the method dispatches an action object to the Redux store. 
* We can dispatch both the action of type `'LOGIN'`:
```React
store.dispatch(actionCreator());
store.dispatch({ type: 'LOGIN' });
```

* Here FreeCodeCamp wants us dispatch the 'LOGIN' action to the Redux store by calling the dispatch method, and passing the action created by `loginAction()`
* Code:
```React
const store = Redux.createStore(
  (state = {login: false}) => state
);

const loginAction = () => {
  return {
    type: 'LOGIN'
  }
};
```
* Here there's an initialized state that's an object containing a `login` property currently set to `false`. There's also an action creator called `loginAction()` which returns an action of type `LOGIN`
* Answer:
```React
store.dispatch(loginAction())
```

###Handle an Action in the Store
* The job of a `reducer` function is put simply, helps the Redux store know how to respond to that action. Reducers in Redux are responsible for the state modifications that take place in response to actions. A reducer takes `state` and `action`as arguments, and it always returns a new `state`.
*  The reducer function must always return a new copy of state and never modify state directly.
* Code:
```React
const defaultState = {
  login: false
};

const reducer = (state = defaultState, action) => {
  // Change code below this line

  // Change code above this line
};

const store = Redux.createStore(reducer);

const loginAction = () => {
  return {
    type: 'LOGIN'
  }
};
```
* Here we have to fill in the body of the `reducer` function so that if it receives an action of type: 'LOGIN' it returns a state object with `login` set to `true`. Else it returns the current `state`. Since the current state and dispatched action are passed to the reducer you can access the action's type with `action.type` 

* Answer:
```React
const reducer = (state = defaultState, action) => {
  if (action.type === "LOGIN") {
    return { login: true };
  } else {
    return state;
  }
 
};
```





Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/redux