title: How to pass actions down to the components in redux
body: <p>I want to fire an action down in my component. This is a presentation component and need not be redux aware. Router implementation is done using react-router-redux.</p>
  
  <p>main.js:</p>
  
  
  
  <pre class="lang-jsx prettyprint-override"><code>let store = createStore(rootReducer)
  
  const history = syncHistoryWithStore(hashHistory, store)
  
  class RenderClass extends Component {
    render() {
      return (
          &lt;Provider store={store}&gt;
              &lt;Router history={history}&gt;
                  &lt;Route path="/" component={MainLayout}&gt;
                      &lt;Route name="employees" path="/employees" url="http://localhost:8080/" component={EmployeeTable}&gt;&lt;/Route&gt;
                      &lt;Route name="personalInformation" path="/personalInformation/:employeeId" url={URI} component={PersonalInformation} /&gt;
                      .....
                  &lt;/Route&gt;
              &lt;Router&gt;
          &lt;/Provider&gt;
          );
      }
  }   
  </code></pre>
  
  <p>App.jsx:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>import * as Actions from './action-creator';
  const MainLayout = React.createClass({
                  render: function() {
  
                      const { dispatch, list } = this.props;
                      let actions = bindActionCreators(Actions, dispatch);
                      console.log(actions);
  
                      return (
                          &lt;div className="wrapper"&gt;
                              &lt;Header actions={actions} list={list} params={this.props.params} /&gt;
  
                      {React.cloneElement(this.props.children, this.props)}
                          &lt;/div&gt;
                      )
                  }
              }); 
  
  function select(state) {
     return {
        list: state.listingReducer
     }
  }
  export default connect(select)(MainLayout);
  </code></pre>
  
  <p>header.js:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>define(
      [
          'react',
          'jquery',
          'appMin'
      ],
      function (React, $) {
          var Link = require('reactRouter').Link;
          var Header = React.createClass({
              handleClick: function () {
                  //Action called here
                  this.props.actions.listEmployees();
              },      
              render: function () {
                  return (
                      &lt;ul className="sidebar-menu"&gt;
                          &lt;li&gt;
                              &lt;Link to={'/employees'} onClick={this.handleClick}&gt;&lt;i className="fa fa-home"&gt;&lt;/i&gt;Employees&lt;/Link&gt; 
                          &lt;/li&gt; 
                      &lt;/ul&gt;
                  );
              }
          });
          return Header;
      }
  )
  </code></pre>
  
  <p>employee.js:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>define(
      [
          'react',
          'jquery',
          'appMin'
      ],
      function (React, $) {
          var EmployeeTable = React.createClass({
  
              render: function () {
                  if (this.props.list != undefined) {
                      var listItems = this.props.list.map(function (listItem) {
                          return (
                              &lt;tr key={listItem.id}&gt;
                                  &lt;td&gt; {listItem.name}&lt;/td&gt;
                  &lt;td&gt;&lt;Link to={'/personalInformation/' + employee.id} onClick={this.props.actions.displayPersonalInformation(employee.id)}&gt;Personal Information&lt;/Link&gt;&lt;/td&gt;
                                  ......
                              &lt;/tr&gt;
                          );
                      }, this);   
                      })
                  }
                  return (
                      &lt;table&gt;
                          &lt;tbody&gt;
                              {listItems}
                          &lt;/tbody&gt;                    
                      &lt;/table&gt;
                  );
              }
          })  
      }
  )
  </code></pre>
  
  <p>action-creator.js:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>export function listEmployees() {
      return {
        type: types.LIST_EMPLOYEES
     };
  }
  
  export function displayPersonalInformation() {
          return {
            type: types.DISPLAY_PERSONAL_INFORMATION
         };
      }
  
  reducer.js:
  function addEmployee(state, action) {
  
     switch (action.type) {
  
        case types.LIST_EMPLOYEES:
           return {"id":"1", "name":"Stackoverflow"}
  
        default:
          return state
     }
  }
  
  function listingReducer(state = [], action) {
      switch (action.type) {
  
          case types.LIST_EMPLOYEES:
              return [
                  ...state, 
                  addEmployee(undefined, action)
              ]
  
          case types.DISPLAY_PERSONAL_INFORMATION:
                  return // Gets personal Information
  
          default:
              return state;
      }
  }
  
  
  const rootReducer = combineReducers({
     listingReducer
  })
  
  export default rootReducer
  </code></pre>
  
  <p>The props will not contain actions since I have not tied it to props. I tried writing mapStateToProps and mapDispatchToProps in <strong>App.js</strong> as shown below:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>function mapStateToProps(state) {
     return {
          list: state.list
      }
  }
  
  function mapDispatchToProps(dispatch) {
     return { actions: bindActionCreators({ actionCreators }, dispatch) }
  }
  </code></pre>
  
  <p>export default connect(mapStateToProps, mapDispatchToProps)(MainLayout)
  I'm getting dispatch is not a function error. The error statement actually sounds like a duplicate question in stackoverflow, but I would also like to know the purpose why I'm using mapDispatchToProps is also right. Thanks in advance.</p>