Redux - reducer not getting called

redux action called but not reducer
mapdispatchtoprops
react redux
redux reducer not updating state
redux dispatch not working
redux action not triggering reducer
combine reducers not working
redux dispatch action from reducer

I'm trying to learn Redux. I followed an online tutorial and used their example and it worked fine. Then I made another small test app and it worked fine. Now I'm trying another small test app and I'm stuck on this error and have no idea why.

The app is simply a input box and a button, and when you click the button it adds whatever's in the box to a list that is displayed below.

However, the reducer isn't updating the state. I've looked at the common problems that cause this and can't seem to find those errors in mine, my reducer doesn't change the state and I've bound the dispatch and so on. Maybe I've just mispelled something somewhere (or something small and stupid like that) but I just can't get it working.

So I tried to change it so that it just displays whatever you type in the box below and it STILL doesn't work. Anyone know why the reducer isn't activating?

index.js (main)

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
import allReducers from './reducers';
import App from './components/App';

const logger = createLogger();
const store = createStore(
    allReducers,
    applyMiddleware(thunk, promise, logger)
);

ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
);

App.js

import React from 'react';
import NameList from '../containers/name-list.js'
import Input from '../containers/input.js'

const App = () => (
  <div>
    <Input />
    <hr />
    <NameList />
  </div>
);

export default App;

index.js (action)

export const addName = (name) => {
    return {
        type: 'NAME_ADDED',
        payload: name
    }
};

reducer-add-name.js

export default function (state = null, action) {
    switch (action.type) {
        case 'NAME_ADDED':
            return action.payload;
            break;
    }
    return state;
}

index.js (reducer combiner)

import {combineReducers} from 'redux';
import AddNameReducer from './reducer-add-name';


const allReducers = combineReducers({
    nameList: AddNameReducer
});

export default allReducers

input.js

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {addName} from '../actions/index'

class Input extends Component {
  render() {
    return(
      <div>
        <input id='name-input' />
        <button id='add-name-button' onClick={() => addName(document.getElementById('name-input').value)}>Add name</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    nameList: state.nameList
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({addName: addName}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(Input);

name-list.js

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

class NameList extends Component {

  getNameList() {
    //This is where I'll loop through this.props.nameList and build the list of elements
    return this.props.nameList;
  }

  render() {
    return(
      <div>Current list : {this.getNameList()}</div>
    );
  }
}

function mapStateToProps(state) {
  return {
    nameList: state.nameList
  };
}

export default connect(mapStateToProps)(NameList);

Thanks for any help!

I think your action hasn't been dispatched.

In your input.js On button tag, change

onClick={() => addName(document.getElementById('name-input').value)}

to

onClick={() => this.props.addName(document.getElementById('name-input').value)}

Thing is action should be passed through mapDispatchToProps and 'bindActionCreators(actions, dispatch)' will wrap your action with 'dispatch', and pass through your component via props 'addName'. (as defined in your mapDispatchToProps)

An action alone is like a bullet (just return object) you will need something to fire it (dispatch)

In your case

import {addName} from '../actions/index' <--- a bullet

has been declared and your onClick, without dispatch, it would only return a mere object, not dispatching it to reducer.

addName() // <--- Just a bullet

But

this.props.addName() // <--- bullet with a gun

is from mapDispatchToProps / bindActionCreators... it has dispatch() wrapped around, that is the one we would use.

Troubleshooting, Sometimes, you are trying to dispatch an action, but your view does not update. Why does this Redux assumes that you never mutate the objects it gives to you in the reducer. The fix is to call dispatch() method on the store instance: Copy. I know it's because of the redux dev tool extension I am using. Can you please tell me what should I do to be able to use the extension again. Error: You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.

You should combine existing state with the new action payload in reducer-add-name.js instead of just returning the payload i.e.

return Object.assign({}, state, {
    todos: [
      ...state,
      {
        action.payload
      }
    ]
  })    

Using combineReducers, Structuring Reducers > Using combineReducers: Explanations of how combineReducers In order to assemble the new state tree, combineReducers will call each slice reducer with its You can use it at all levels of your reducer structure, not just to create the root reducer. Getting Started · FAQ · Tutorial · API Reference  Verify that the state updates after the action in the way you expect. If mapStateToProps doesn’t even get called, it means that. Either you forgot to dispatch() an action and just called an action creator, Or your reducer returned referentially identical value so connect() didn’t bother calling mapStateToProps().

This happened to me today.

I forgot to add my new action to my destructured props in React while using the class method

const { newAction } = this.props

Actions not dispatched to reducers, WHY!? - JavaScript, Hi campers, I am working on the Simon game. Having major trouble figuring out why actions are not being dispatched to reducers. but I am also using Redux-Thunk which returns a function and call a dispatch function. It's possible you're correctly dispatching an action and applying your reducer but the corresponding state is not being correctly translated into props. #Something else doesn't work. Ask around on the #redux Reactiflux Discord channel, or create an issue. If you figure it out, edit this document as a courtesy to the next person having the same

Actions and reducers: updating state · Human Redux, This point is pivotal to getting the most out of Redux: the recepient, not the what I had called it when working on a reducer that was handling that payload, then  Reducers are a pure function in Redux. Pure functions are predictable. Reducers are the only way to change states in Redux. It is the only place where you can write logic and calculations. Reducer function will accept the previous state of app and action being dispatched, calculate the next state

Fullstack React: Redux actions, It gets called with the dispatch function, so here we can bind the function to Redux has a way for us to split up our redux reducers into multiple reducers, as a professional comedian, but have come to terms with the fact that I am not funny. And like other reducers, combineReducers() does not create a new object if all of the reducers provided to it do not change state. # Note for ES6 Savvy Users Because combineReducers expects an object, we can put all top-level reducers into a separate file, export each reducer function, and use import * as reducers to get them as an object with

The complete beginners guide to Redux reducers with code examples, A Redux reducer is a function that accepts an accumulation, new values, and returns a Throughout my researching the word Redux kept getting tossed around. State is read-only; Changes are made with pure function called reducers Redux does not allow you to modify the state object directly, and requires you to  Note: In Redux, all reducers get called regardless of the action, so inside each one you have to return the original state if the action is not applicable. Each reducer takes 2 parameters: the

Comments
  • Check the console for any errors. Also I can't see your reducer exporting AddNameReducer (which is imported in index.js), but you may have just missed this off the post rather than the real code.
  • There are no console errors at any point. And AddNameReducer is just the reducer-add-name.js file, which is a single exported function.
  • The connect function in input.js is mapping dispatch methods to props for the Input component. So when the Input component's render function calls addName it would expect to reference this as a prop? (So try this.props.addName)
  • Yep that was it! :) Thanks!
  • Awesome that's it! I get it now, thanks very much :D
  • Thank you for this. I was using object destructuring and forgot to add the action to the destructure