Clash Royale CLAN TAG#URR8PPP

Undefined mapStateToProps React Redux

Hey I have badgeNumber constantly returned as undefined and I really don't understand why. I will appreciate any help thanks.

My Reducer:

import OPEN_DROPDOWN, ADD_TASK, REMOVE_TASK, CLOSE_DROPDOWN from '../types/MenuTypes';

const initialState =
badgeNumber: 6,
drop: false,
tasks:
;

export function reducerMenuEntry(startMenuState = initialState, action)
switch (action.type)
case OPEN_DROPDOWN:
return Object.assign(, startMenuState,
...startMenuState,
drop: true
);

case CLOSE_DROPDOWN:
return Object.assign(, startMenuState,
...startMenuState,
drop: false
);

case REMOVE_TASK:
case ADD_TASK:
return Object.assign(, startMenuState,
...startMenuState,
badgeNumber: action.badgeNumber,
tasks: action.tasks
);

default:
return initialState;




And the component where I try to display data:

import connect from 'react-redux';

class ToolsBar extends Component
render()
const badgeNumber = this.props;
alert(badgeNumber);
return (
<Toolbar ...this.props.getActionsProps()>
<ToolbarButton>
<Badge badgeContent=badgeNumber />
</ToolbarButton>
</Toolbar>
);
;
;

const mapStateToProps = state =>
return
drop: state.drop,
badgeNumber: state.badgeNumber
;
;

export default connect(mapStateToProps)(ToolsBar);


Store:

import createStore, applyMiddleware from 'redux';
import RootReducer from './reducers/RootReducer';
import thunk from 'redux-thunk';

export default () =>
return createStore(RootReducer, applyMiddleware(thunk));
;


Actions but currently they are not completely implemented. I want to display the static value before modify them via actions:

import OPEN_DROPDOWN, ADD_TASK, REMOVE_TASK, CLOSE_DROPDOWN from "../types/MenuTypes";

export const open = () =>
return type: OPEN_DROPDOWN
;

export const close = () =>
return type: CLOSE_DROPDOWN
;

export function addTask(tasks, badgeNum)
badgeNum++;
return type:ADD_TASK, tasks, badgeNum
;

export function removeTask (tasks, badgeNum)
badgeNum--;
return type: REMOVE_TASK, tasks, badgeNum
;


Combined Reducer:

import combineReducers from 'redux';
import reducerUpdatePageEntry from './UpdatePageReducer';
import reducerSearchPageEntry from './SearchPageReducer';
import reducerSharedEntry from './SharedReducer';
import reducerUploadPageEntry from './UploadPageReducer';
import reducerMenuEntry from './MenuReducer';

export default combineReducers(
updateStates: reducerUpdatePageEntry,
displaySearchStates: reducerSearchPageEntry,
sharedStates: reducerSharedEntry,
uploadStates: reducerUploadPageEntry,
menuStates: reducerMenuEntry
);


badgeNumber

state

2 Answers
2

You had a wrong path specified in mapStateToProps:

const mapStateToProps = state =>
return
drop: state.menuStates.drop,
badgeNumber: state.menuStates.badgeNumber
;
;


Additionally be careful about

default:
return initialState;


I guess it should be

default:
return startMenuState;


because if you return initialState the state will be reset with each unhandled action.

initialState

When you combine reducers, you kind of create multiple states on your application.

Your mapStateToProps function should look like this:

const mapStateToProps = state =>
return
drop: state.menuStates.drop,
badgeNumber: state.menuStates.badgeNumber
;
;


One more thing: If you are already using object spread, you dont need Object.assign

Just use it like this:

return
...startMenuState,
drop: false
);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.