Redux nested duplicate properties are creating

Question

I am storing data in Redux store but instead of updating the store property its creating nested duplicates

Index.js

const initialStore = {
    user: {},
    brands: [],
    category: []
}
ReactDOM.render(
    <Provider store={configureStore(initialStore)}>
        <App />
    </Provider>,
    document.getElementById('root')
);

Store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/rootReducer';
const enhancers = [];
const middleware = [
    thunk
];

const windowIfDefined = typeof window === 'undefined' ? null : window;
if (windowIfDefined && windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__) {
    enhancers.push(windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__());
}

export default function configureStore(initialState = {}) {
    return createStore(
        rootReducer,
        initialState,
        compose(applyMiddleware(...middleware), ...enhancers)
    );
}

RootReducer.js

import { combineReducers } from 'redux';
import brandsReducer from './brandsReducer';
import userReducer from "./userReducer";
import categoryReducer from "./categoryReducer";
export default combineReducers({
    brands: brandsReducer,
    user: userReducer,
    category: categoryReducer
});

CategoryReducer.js

export default (state = {}, action) => {
    switch (action.type) {
        case 'UPDATE_CATEGORIES':
            return Object.assign({}, state, { category: action.payload });
        case 'TOGGLE_CATEGORY_SELECTION':
            return {
                ...state, category: { ...state.category, category: action.payload }
            }
        default:
            return state;
    }
}

I want to store in store-> category -> Array & store-> brands -> Array in this format.

Is the category state inside CategoryReducer an array? If so then shouldn't you be using [] instead of {} while destructuring and appending category? — Mohammad Abdul Alim
– Mohammad Abdul Alim, Commented May 16, 2021 at 5:35

Kevin Koech · Accepted Answer · 2021-05-16 05:36:16Z

1

in CategoryReducer.js have the case 'TOGGLE_CATEGORY_SELECTION' look like this

return { ...state, category: [ ...state.category, ...action.payload ] }

or if you do not want to add to values to category array in the store

return { ...state, category: action.payload }

answered May 16, 2021 at 5:36

Kevin Koech

781 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ghanshyam Singh Over a year ago

Hi @Kevin TOGGLE_CATEGORY_SELECTION this action is not triggering only UPDATE_CATEGORIES is triggering.

Collectives™ on Stack Overflow

Redux nested duplicate properties are creating

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related