CODEWITHSUNDEEP
reactjsredux
Potney Switters
Potney Switters

Reputation: 3062

Reducer not firing

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

Upvotes: 1

Views: 1715

Answers (2)

Toni Leigh
Toni Leigh

Reputation: 4971

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

Upvotes: 0

Radio-
Radio-

Reputation: 3171

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.

Upvotes: 4

Related Questions