How Does redux custom reducer work with Thunk

Question

I have some experience working with React and Redux

Frankly, Till now, i have been usually just copying-pasting the code without comprehending what is happening.

I was thinking about how reducer works (while trying Vuex) and that lead me to following question

 import {
        MEETUP_GROUP_DATA_SUCCESS,
        MEETUP_GROUP_DATA_LOADING,
        MEETUP_GROUP_DATA_ERROR,
        GOOGLE_PROFILE_LOGOUT
    } from "./../config/type.js"

const intialState = {
    meetupProfileData: null,
    meetupProfileLoading: null,
    meetupProfileError: null,  
}

export default function (state = intialState, action) {

    switch (action.type) {
        case MEETUP_GROUP_DATA_LOADING:
            return {
                ...state,
                meetupProfileLoading: true
            }
        case MEETUP_GROUP_DATA_SUCCESS: 
            return {
                ...state, 
                meetupProfileLoading: false, 
                meetupProfileError: false,
                meetupProfileData: action.payload,
            }
        case   MEETUP_GROUP_DATA_ERROR:
            return {
                ...state,
                meetupProfileLoading: false, 
                meetupProfileError: action.payload,
            }
        case  GOOGLE_PROFILE_LOGOUT: 
            return {
                ...state, 
                meetupProfileLoading: null, 
                meetupProfileError: null,
                meetupProfileData: null,
            }
        default:
            return state
    }

}

Here notice our const intitalState

Now, Suppose an action is dispatched. This will make redux call this function

export default function (state = intialState, action) {

Here our state is equal to initialState. So every-time we dispatch an action our state should be equal to intialState? since we are saying state = intialState

So what is the use of ...state here? If you are going to answer by saying that it makes copy of previous state then please mention how would our state have copy of previous state because every time an action is being dispatched our state is being equal to initial state and our initial state have all the parameters as null

Narigo Narigo · Accepted Answer · 2019-02-12T00:27:16

The parameter state = initialState means that state defaults to initialState, if it was not provided. Redux will call your reducers once in the beginning to "initialize" your state, meaning it will call your reducer with null or undefined. Since you're setting the state to initialState in this case and returning that, Redux will receive the initial state you've set up.

All subsequent calls will use the new state - so when your reducer receives an action that will change something, you need to return the whole state again with the relevant updates.

Returning { ...state, somethingToUpdate: "foo" } means you're essentially copying the state variable into a new object, overwriting the somethingToUpdate key with "foo".

Basically, Redux only calls your reducers and if your reducer receives an action it does not care about, it needs to return the current state. If you happen to return nothing (maybe forgot to add the default: return state in the switch), the state gets undefined again and will reset to the initialState due to the default parameter provided in the function signature (state = initialState).

How Does redux custom reducer work with Thunk

2 Answers