CODEWITHSUNDEEP
reactjsreduxreact-redux
Fatema tuz johura
Fatema tuz johura

Reputation: 141

State Not Changing Properly In React Redux

I am new to React Redux I have initialized state which is properly displaying by calling its respective reducer which job to return the initialize State. But after mutating the state the state most probably not changing and i cant figure it out why 

import { combineReducers } from 'redux';

const initialState = {
    songs:[
        {title:'No Scrubs', duration: '4:05'},
    ]
}

const songReducers = (state = initialState)=>{
    return state
}

const selectedSongReducer =(selectedSong=null,action)=>{
    if(action.type==='SONG_SELECTED'){
        return action.payload
    }

    return selectedSong;
}


const addSongReducer = (state=initialState,action)=>{
    if(action.type==="ADD_SONG"){
       return {
        ...state,   
        songs:[
           ...state.songs, {title:'All demo', duration: '4:05'}
        ]
    }
    }
    return state;
}

export default combineReducers({
    songs: songReducers,
    selectedSong: selectedSongReducer,
    addSong:addSongReducer
})

Upvotes: 0

Views: 34

Answers (1)

Aiyaz N.
Aiyaz N.

Reputation: 31

Your overall state shape will look like

state = {
    songs: {
        songs: [
            { title: 'No Scrubs', duration: '4:05' },
        ]
    },
    selectedSong: null,
    addSong: {
        songs: [
            { title: 'No Scrubs', duration: '4:05' },
        ]
    }
}

after the very first reducer call. Is this what you want? Asking because you have 

state = {
    songs: {
        songs: [
            { title: 'No Scrubs', duration: '4:05' },
        ]
    },
    ...
}

instead of just

state = {
    songs: [
        { title: 'No Scrubs', duration: '4:05' },
    ]
    ...
}

Upvotes: 1

Related Questions