MapStateToProps and MapDispachToProps in parent and child components not working

Question

Within my app.js I have my mapDispachToProps function ,which is supposed to send an action of type:increment to the reducer in the redux store. When the reducer receives it he is supposed to incremnet the initial state by 1.

In the heading component, which is a child of the app.js component I want to display the new value via mapStateToProps and this.props.value. The problem is it doesn`t work and I get no error message in the console.

When I do everything in the App.js it works very well.

What am I doing wrong?

Thanks in advance

My index.js

let store = createStore(increaseReducer);

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

My store

export function increaseReducer(state = 0, action) {
    if(action.type == "INCREMENT") {
        return state+1;
    }   

    else {
        return state;
    }
}
export default increaseReducer;

my app.js

import React, {Component} from 'react';
import{ connect }from 'react-redux';
import {Heading} from './components/heading';

class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
  return (
    
       
       
    
  );
  }
}

let mapDispachToProps= {
  increment:()=> {
  return {type:"INCREMENT"}}
}

let AppContainer= connect(null,mapDispachToProps)(App);
export default AppContainer;

my heading.js

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

export class Heading extends Component {
        constructor(props){
            super(props);
        }

        render() {
            return(
                    Click Counter: {this.props.value}      
                )
        }
}

let mapStateToProps = (state)=>{return {
  value: state
}}

let headingContainer = connect(mapStateToProps)(Heading);

export default headingContainer;

user_1641941 · Answer

Heading exports default so in App it should be:

import Heading from './components/heading';

Here is your code as a snippet and it works:

const {
  Provider,
  connect,
} = ReactRedux;
const { createStore } = Redux;
const { Component } = React;

function increaseReducer(state = 0, action) {
  if (action.type == 'INCREMENT') {
    return state + 1;
  } else {
    return state;
  }
}
let store = createStore(increaseReducer);

//heading
class HeadingComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return Click Counter: {this.props.value} ;
  }
}

let mapStateToProps = (state) => {
  return {
    value: state,
  };
};

let Heading = connect(mapStateToProps)(HeadingComponent);

class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      
        
        
      
    );
  }
}

let mapDispachToProps = {
  increment: () => {
    return { type: 'INCREMENT' };
  },
};

let AppContainer = connect(null, mapDispachToProps)(App);

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

user_3153799 · Answer

You need to dispatch your actions:


const mapDispachToProps = dispatch => {
  return {
    increment: () => dispatch({
      type:"INCREMENT"
    }}
  }
}

reducer:

export default (state = 0, action) => {
    switch (action.type) {
      case 'INCREMENT':
        return state + 1;
      default:
        return state;
    }

MapStateToProps and MapDispachToProps in parent and child components not working

2 Answers