CODEWITHSUNDEEP
reactjsreduxreact-state-management
Ghanshyam Singh
Ghanshyam Singh

Reputation: 1381

Redux nested duplicate properties are creating

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

enter image description here

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.

Upvotes: 0

Views: 178

Answers (1)

Kevin Koech
Kevin Koech

Reputation: 78

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 }

Upvotes: 1

Related Questions