Stack Exchange
Action not passing data to reducer
I have the following setup:
Dashboard.jsx:
import React, { Component } from "react";
import { addFlashMessage } from "../actions/flashMessages";
import RoomsList from "./RoomsList";
import PropTypes from "prop-types";
import FlashMessagesList from "../components/flash/FlashMessagesList";
import { connect } from "react-redux";

class Dashboard extends Component {
  render() {
    return (
      <div className="componentContent">
        <FlashMessagesList />
        <RoomsList addFlashMessage={addFlashMessage} />
      </div>
    );
  }
}
Dashboard.propTypes = {
  addFlashMessage: PropTypes.func.isRequired
};

export default connect(null, { addFlashMessage })(Dashboard);

RoomsList:
import React, { Component } from "react";
import PropTypes from "prop-types";

class RoomsList extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  onClick() {
    this.props.addFlashMessage({
      type: "success",
      text: "You signed up successfully. Welcome."
    });
  }
  render() {
    return (
      <div className="componentContent" onClick={this.onClick} />
    );
  }
}

RoomsList.propTypes = { addFlashMessage: PropTypes.func.isRequired };

export default RoomsList;

Actions.js:
export function addFlashMessage(message) {
  console.log("action called");
  return {
    type: ADD_FLASH_MESSAGE,
    message
  };
}

Reducers.js
import { ADD_FLASH_MESSAGE } from "../actions/types";
import shortid from "shortid";

export default (state = [], action = {}) => {
  console.log(action);
  switch (action.type) {
    case ADD_FLASH_MESSAGE:
      return [
        ...state,
        {
          id: shortid.generate(),
          type: action.message.type,
          text: action.message.text
        }
      ];
    default:
      return state;
  }
};

index.js:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { BrowserRouter as Router, Route } from "react-router-dom";

// Redux
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./rootReducer";

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )
);

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <div className="navSwitch">
        <Route path="/" component={App} />
      </div>
    </Router>
  </Provider>,
  document.getElementById("root")
);

And the actions.js console.log shows up ok, but in reducer.js the console.log is not being executed and hence only the default state gets returned.
Can anybody spot where the problem could be?

Redux dev tools is a good help for things like this - be worth using this just to see if an action actually fires, if so at least you know its in the reducer, if not the action isn't being dispatched

In Dashboard component you're passing addFlashMessage action to component via props, but inside component you're using imported function instead of passed one. They're looks same (because they're actually different versions of same function) but since imported function is is not wrapped in dispatch() - call to it doesn't trigger Redux action.
Fix is obvious - you need to use this.props.addFlashMessage here: <RoomsList addFlashMessage={addFlashMessage} />

This leads to Failed prop type: The prop 'addFlashMessage' is marked as required in Dashboard, but its value is 'undefined'.

Of course, because my example returns {actions:addFlashMessage}. Such approach is recommended because normally you have multiple actions in component. You can either return single action instead or update your propTypes definition to have actions: PropTypes.object.isRequired instead. You will also need to update action references inside component.

But this isn't really the cause of this problem as my approach can be used as well as we can read here: https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132 so the issue has to be somewhere else.

@Xeen You're right, sorry, was not aware about such shorthand syntax. Also I was confused by sympthom. However I see real reason of the problem, I will update answer now

If you look at my code, I'm already doing that :) so this is something yet another.

At least not in a code that you've provided in a question

I'm talking about Dashboard, not a RoomsList
