Reactjs 正在创建重复的嵌套属性

我将数据存储在Redux store中，但不是更新store属性，而是创建嵌套的重复项

Index.js

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

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)
    );
}

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
});

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;
    }
}

RootReducer.js

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

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)
    );
}

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
});

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;
    }
}

CategoryReducer.js

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

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)
    );
}

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
});

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;
    }
}

---

我想以这种格式存储在

store->category->Array

&

store->brands->Array

中。

在

CategoryReducer.js

中的“TOGGLE\u category\u SELECTION”案例如下所示

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

或者，如果不想将值添加到存储中的类别数组中

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

---

CategoryReducer

中的

category

状态是否为数组？如果是这样，那么在分解和追加类别时，您不应该使用

[]

而不是

{}

？是@MohammadAbdulAlim category是一个数组。好的，ll checkHi@Kevin TOGGLE\u CATEGORY\u选择此操作不会触发，只会触发UPDATE\u CATEGORIES。