Use multiple reducers in reactjs - reactjs

Question

I have 2 reducers:
const initialState = {
data:[],
};
export const first = (state = initialState, action) => {
switch (action.type) {
case DATA: {
return {
...state,
data: action.payload
}
}
}
return state;
};
and second:
const initialState = {
data2:[],
};
export const second = (state = initialState, action) => {
switch (action.type) {
case DATA2: {
return {
...state,
data2: action.payload
}
}
}
return state;
};
I decided tu use combineReducers to merge them. Fot this, i used:
const rootReducer = combineReducers({first, second});
My store:
import rootReducer from "./reducer/rootReducer";
export const store = createStore(rootReducer);
console.log(store.getState())
When i check the state of the store with store.getState(), i get an object something like this:
{first: {…}, second: {…}},
but i need to use destructuring of these 2 objects inside combine reducers.
For this i made:
const rootReducer = combineReducers({...first, ...second});but now, i got an emty object, plus this error: Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
Question: Why i can't destructure the reducers like i wrote above? How to do this?

Answer 1

The reason you cannot destructure the reducers like above is because they are functions and not objects
If you carefully look you are creating an object for combineReducers like
combineReducers({
first: (state, action) => {...},
second: (state, action) => { ...}
})
Now combineReducer returns you a single function by combining the reducers which you can pass to createStore,
You can destructure the individual state post store.getState()
const {first, second} = store.getState();
const data = {...first, ...second};