React Native - Redux combineReducers not working - react-native

Question

I try to save three values in redux for counters. This is my file with the combineReducers:
import { combineReducers } from 'redux';
const SET_FREUNDE = 'SET_FREUNDE';
const SET_CHATS = 'SET_CHATS';
const SET_VOTES = 'SET_VOTES';
export function setFreunde(value) {
return {
type: SET_FREUNDE,
value,
}
}
export function setChats(value) {
return {
type: SET_CHATS,
value,
}
}
export function setVotes(value) {
return {
type: SET_VOTES,
value,
}
}
const defaults = [
{
countervotes: 1,
counterchats: 1,
counterfreunde: 1
}
];
function counter(state=defaults, action) {
switch (action.type) {
case SET_FREUNDE:
return [
...state,
{
...state.counterfreunde = action.value
}
];
case SET_CHATS:
return [
...state,
{
...state.counterchats = action.value
}
];
case SET_VOTES:
return [
...state,
{
...state.countervotes = action.value
}
];
default:
return state;
}
}
const counters = combineReducers({
counter
});
export default counters;
In my App.tsx I create the store and want to get the values:
import { Provider, useSelector } from "react-redux";
import { createStore} from "redux";
import counters from './src/redux/counter';
const store = createStore(counters);
const AppStack = () => {
const counterfreunde = useSelector((state)=>state.counterfreunde);
const counterchats = useSelector((state)=>state.counterchats);
const countervotes = useSelector((state)=>state.countervotes);
return(
...
)
}
const App = () => {
...
return(
<Provider store={store} >
<AppStack/>
</Provider>
);
}
export default App;
But counterfreunde, ... are undefined. If I set the values directly in the store like this:
const store = createStore(() => ({
counterfreunde: 1,
counterchats: 1,
counterfreunde: 1
}));
all works fine. I think the problem is with the definition of the combineReducer.

Answer 1

When you use combineReducers, you provide it with a "Reducers Map Object" that maps the property names of the state to reducer that controls that property.
const counters = combineReducers({
counter
});
Calling combineReducers like above says that your root state has a property counter which is controlled by your counter reducer.
This is fine in isolation, but it changes your selectors because the properties like counterfreunde are not properties of the top-level state, they are properties of state.counter. So your selectors would need to be like this:
const counterfreunde = useSelector((state) => state.counter.counterfreunde);
If counter is the only reducer that you have then you don't need to use combineReducers. You can keep your selectors the same as they are now by providing your counter reducer as the reducer for the root state.
function counter(state=defaults, action) {
...
}
// remove the combineReducers
export default counter;
const store = createStore(counter);

Answer 2

Yes, the issue is in your combineReducers invocation. Attached is a working, nested reducer formulated by combining other reducers.
import { combineReducers } from 'redux';
import {
RESETPLAN,
SELECTEDPLAN,
selectPlanActionType,
} from './selectedPlan/types';
import { planType } from './plans/types';
import { PROTECTEDPLANS, plansActionType, plansType } from './plans/types';
const defaultSelectedState: planType = {};
const defaultPlanState: plansType = {
list: [],
};
function plansReducer(
state: plansType = defaultPlanState,
action: plansActionType
): plansType {
switch (action.type) {
case PROTECTEDPLANS: {
return {
...state,
...action.payload,
};
}
default: {
return state;
}
}
}
function selectedReducer(
state: planType = defaultSelectedState,
action: selectPlanActionType
): planType {
switch (action.type) {
case SELECTEDPLAN: {
return {
...state,
...action.payload,
};
}
case RESETPLAN: {
return defaultSelectedState;
}
default: {
return state;
}
}
}
export default combineReducers({
myPlans: plansReducer,
selected: selectedReducer,
});