CODEWITHSUNDEEP
reactjsredux
Alwaysblue
Alwaysblue

Reputation: 11830

Explanation about Action Type

I am following this video on youtube to learn redux

Here the instructor created a reducer by doing something like this (we are calling it as a post reducer and it will merge with other reducer when we import it to rootreducer 

import { FETCH_POST, NEW_POST } from '../actions/type.js'


const initialState = {
  items: [],
  item: {}
}

export default function(state = initialState, action) {
  switch (action.type) {
      default:
        return state
  }

}

Above import { FETCH_POST, NEW_POST } from '../actions/type.js' are action types and contains only following things 

export const FETCH_POST = 'FETCH_POST';
export const NEW_POST = 'NEW_POST';

Now since this is related to redux, I understand what acton does but I don't get how do we get action here when we aren't importing anything and action does't seem to be defined.

Maybe he would do it to fix this later but just to check if I am missing something?

Similarly, few minutes in the video (At around 42 minutes according to youtube video) ,He created a postAction folder where we have something like this 

import { FETCH_POST, NEW_POST } from '.type.js'
import axios from 'axios';


export const fetchPosts = () => {
  return (dispatch) {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(response => dispatch({
      type: FETCH_POST,
      payload: res
    })


  }

}

and without even importing anything, he extended the switch condition in above code like this 

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_POST:
      return {
        ...state,
        items: action.payload 
      }
      default:
        return state
  }

Similar to our first example, what is action here and how does it know about our action.type when we haven't imported anything?

Upvotes: 0

Views: 569

Answers (2)

Stefano Bettinelli
Stefano Bettinelli

Reputation: 11

I think you are missing some of the most important concept from Redux here: everything revolves around isolated pure functions

export default function(state = initialState, action) {   
      switch (action.type) {
        case FETCH_POST:
          return {
            ...state,
            items: action.payload 
          }
          default:
            return state
}

Similar to our first example, what is action here and how does it know about our action.type when we haven't imported anything?

This is a reducer and at it's core is just a pure function (as most of the things in Redux) so you really don't care about importing anything because the action is just a parameter of the function and the Redux library will take care of calling this function when a dispatch will be performed and at that point the action type will be checked by the switch.

But the most important point here is that you don't need to import anything, you just need to write correctly your reducer expecting certain type of action, which you are aware of because you also wrote the action creator, which again they are also pure function that simply returns an object with a mandatory type property that most of the time has a string value

Upvotes: 1

Raghudevan Shankar
Raghudevan Shankar

Reputation: 1093

When you call dispatch({ type: FETCH_POST, payload: res }) in the then of your network call, that dispatches an action of type FETCH_POST to your reducers. The reducer which matches for this action's type will get to return a new value for your state.

The action in your reducer refers to the object that is being dispatched i.e { type: FETCH_POST, payload: res }

Upvotes: 2

Related Questions