CODEWITHSUNDEEP
reactjsreduxreact-redux
Dhairya Khara
Dhairya Khara

Reputation: 175

How to replace an entire array in a redux reducer while allowing application to re-render?

In one of my application's reducers, I require to replace an entire array. Hence, I have written my reducer like this:

const arrayReducerDefaultState = []

const arrayReducer = (state = arrayReducerDefaultState, action) =>{
    switch(action.type){
        case "CHANGE_ARRAY":
            return{
                ...state,
                array: action.array
            }
        default:
            return state
    }
}

export default arrayReducer

When the action is called, I see the array is being updated (using Redux Dev Tools). But the application does not render again when the 'array' value is updated.

How do I change my reducer so that I can keep replacing my entire array while allowing the application to re-render when the store changes.

EDIT 1:

    const arrayReducerDefaultState = {
    array: []
}

const arrayReducer = (state = arrayReducerDefaultState, action) =>{
    switch(action.type){
        case "CHANGE_ARRAY":
            return {
                ...state,
                array: action.array
            }
        default:
            return state
    }
}

Since I was having problems working with the default state being an array, I made it such that it is an object with an array in it. 'array' now is not undefined but changing it still does not re-render the application.

Upvotes: 0

Views: 359

Answers (2)

Dhairya Khara
Dhairya Khara

Reputation: 175

The above solution works, but my problem was somewhere else.

Upvotes: 0

Andrew
Andrew

Reputation: 60

Tour state is array, but you return object in "CHANGE_ARRAY" case.

const arrayReducerDefaultState = []

const arrayReducer = (state = arrayReducerDefaultState, action) =>{
    switch(action.type){
        case "CHANGE_ARRAY":
            return action.array
        default:
            return state
    }
}

export default arrayReducer

Actually you can have mistake in selector.

PS action has struct like object where must be type (required), payload (optinal) - there is you data, meta (optinal) - another additional inforamtion

Upvotes: 1

Related Questions