Combining Reducers

To make codes modularise, we can combine multiple reducers into a single root reducer and utilize it.

// changeCount Action
export function changeCount(amount = 1) {
    return {
        type: "CHANGE_COUNT",
        payload: amount
    }
}

// count Reducer
export default function countReducer(count = 0, action){
    switch(action.type){
        case "CHANGE_COUNT":
            return count + action.payload
        default:
            return count
    }   
}

// addfavoriteThing Action
export function addFavoriteThing(thing) {
    return {
        type: "ADD_FAVORITE_THING",
        payload: thing
    }
}

// removeFavoriteThing Action
export function removeFavoriteThing(thing) {
    return {
        type: "REMOVE_FAVORITE_THING",
        payload: thing
    }
}

export default function favoriteThingsReducer(favoriteThings = [], action){
    switch(action.type){
        case "ADD_FAVORITE_THING":
            return [...favoriteThings, action.payload]
        case "REMOVE_FAVORITE_THING":
            const updatedArr = favoriteThings.filter(thing => thing !== action.payload)
            return updatedArr
        default:
            return favoriteThings
    }
}

// setYoutubeTitle Action
export function setYoutubeTitle(title) {
    return {
        type: "SET_YOUTUBE_TITLE",
        payload: title
    }
}

// incrementViewCount Action
export function incrementViewCount() {
    return {
        type: "INCREMENT_VIEW_COUNT"
    }
}

// giveUpvote Action
export function giveUpvote() {
    return {
        type: "GIVE_UPVOTE"
    }
}

// giveDownvote Action
export function giveDownvote() {
    return {
        type: "GIVE_DOWNVOTE"
    }
}

const initialState = {
    title: "",
    viewCount: 0,
    votes:{
        upvote:0,
        downvote:0
    }
}

// youTubeVideo Reducer
export default function youTubeVideoReducer(youTubeVideo = initialState, action){
    switch(action.type){
        case "SET_YOUTUBE_TITLE":
            return {
                ...youTubeVideo,
                title: action.payload
            }
        case "INCREMENT_VIEW_COUNT":
            return {
                ...youTubeVideo,
                viewCount: youTubeVideo.viewCount + 1
            }
        case "GIVE_UPVOTE":
            return {
                ...youTubeVideo,
                votes: {
                    ...youTubeVideo.votes,
                    upvote: youTubeVideo.votes.upvote + 1
                }   
            }
        case "GIVE_DOWNVOTE":
            return {
                ...youTubeVideo,
                votes: {
                    ...youTubeVideo.votes,
                    downvote: youTubeVideo.votes.downvote - 1
                }
            }
        default:
            return youTubeVideo
    }
}

// Importing all reducers
import countReducer from "./count"
import favoriteThingsReducer from "./favoriteThings"
import youTubeVideoReducer from "./youTubeVideo"

// Importing Redux
const redux = require("redux")

// Destructure combineReducers & createStore from Redux 
const {combineReducers, createStore} = redux

// Combining the reducers into a single state tree
const rootReducer = combineReducers({
    count: countReducer,
    favoriteThings: favoriteThingsReducer,
    youTubeVideo: youTubeVideoReducer
})

// Creating Store - createStore() takes rootReducer() as input
const store = createStore(rootReducer)

// subscribe() - a redux method that is called everytime a change occurs in the Store 
store.subscribe(() => {
    // getState() returns the current state tree of your application
    console.log(store.getState())
})

// Exporting Store
export default store

// Importing Store 
import store from "./redux"

// Importing Actions
import {changeCount} from "./redux/count"
import {addFavoriteThing} from "./redux/favoriteThings"
import {removeFavoriteThing} from "./redux/favoriteThings"
import {setYoutubeTitle} from "./redux/youTubeVideo"
import {incrementViewCount} from "./redux/youTubeVideo"
import {giveUpvote} from "./redux/youTubeVideo"
import {giveDownvote} from "./redux/youTubeVideo"

// Dispatch - carries the information to Reducer to inform what Type of Action should be performed 
store.dispatch(changeCount(5))
store.dispatch(addFavoriteThing("Raindrops on roses"))
store.dispatch(addFavoriteThing("Whiskers on kittens"))
store.dispatch(removeFavoriteThing("Raindrops on roses"))
store.dispatch(setYoutubeTitle("Learn Js"))
store.dispatch(incrementViewCount())
store.dispatch(giveUpvote())
store.dispatch(giveDownvote())

PreviousHandling Complex State NextPlain JS Redux Practice

Last updated 4 years ago

Was this helpful?