Reducer not firing - reactjs

Question

I am standing in a tricky situation.
I my reducer rhythmReducer.js is the following:
import {TOGGLE_NOTE_VALUE} from '../constants/actionTypes';
import objectAssign from 'object-assign';
import initialState from './initialState';
export default function rhythmReducer(state = initialState.rhythm, action) {
let newState = objectAssign({}, state);
console.log("---RhythmReducer");
console.log(action.type);
switch (action.type) {
case TOGGLE_NOTE_VALUE:
console.log("TOGGLE_NOTE_VALUE");
return newState;
default:
return newState;
}
}
The component using it is RhythmContainer.js:
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions/rhythmActions';
import {Meter} from './Meter';
export const RhythmContainer = (props) => {
let rows = [];
for (let i=0; i < props.rhythm.meters.length; i++) {
rows.push(<Meter key={i} actions={actions} rhythm= {props.rhythm.meters[i]}/>);
}
const handleClick = () => {
return props.store.dispatch(actions.toggleNoteValue);
};
return (
<div onClick={handleClick}>
This will be a 4/4 rhythm
{rows}
</div>
);
};
RhythmContainer.propTypes = {
rhythm: PropTypes.object.isRequired,
store: PropTypes.object.isRequired,
};
function mapStateToProps(state) {
return {
rhythm: state.rhythm,
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(RhythmContainer);
My action is defined in rhythmActions.js
import * as types from '../constants/actionTypes';
export function toggleNoteValue() {
console.log("toggleNoteValue");
return {type: types.TOGGLE_NOTE_VALUE};
}
Even though the reducer runs when the page is initializing I can not get it to run when I click on the div.
toggleNoteValue() is firing up but it never goes in the actual Reducer.
Any help?
PS the full project is here just in case it helps: https://github.com/ichionid/rhythmGeneratorReact/tree/master/src

Answer 1

Here are a couple things to try.
In your project, configureStore.js imports a rootReducer from
"../rootReducer", but there's no such module. I'm not sure if this is
just a commit issue, but it's worth checking.
The argument to dispatch should be an action. actions.toggleNoteValue
is not an action, it's a function that returns an action. Try
props.store.dispatch(actions.toggleNoteValue()) or
props.actions.toggleNoteValue() instead.

Answer 2

I sometimes notice this problem when reducers don't fire because they've not been put through mapDispatchToProps correctly:
// WRONG
import { action } from './actions'
// action will still fire as a function, but that's it
const Comp = ({ label }) => <button onClick={() => action()}>{label}<button>
export default connect(mapStateToProps, { action })
// RIGHT
import { action } from './actions'
// action is sent in as a prop meaning we use the connected version rather than the action directly
const Comp = ({ action, label }) => <button onClick={() => action()}>{label}<button>
export default connect(mapStateToProps, { action })