Print value from props, which is delivered to the component from redux by mapStateToProps

Question

Problem:

I can't display the value from the state of redux, which is delivered by mapStateToProps function to the component.

Project structure:

Create-react-app CLi application built the project. Inside of the src/ I have the following code structure

Necessary code: The main page which we are interacting with looks like this:

Underneath it is planned to post the result of the clicking on the buttons.

So how do I bind the redux state and actions to those two components: Calculator and ResultLine?

Let me show the index.js code, where I create the store:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from './reducers/';

import App from './components/App';

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

There are only three actions:

import {CALCULATE, ERASE, PUT_SYMBOL} from "./types";

export const putSymbol = (symbol) => {
    return {
        type: PUT_SYMBOL,
        payload: symbol
    }
};

export const calculate = () => {
    return {
        type: CALCULATE
    }
};

export const erase = () => {
    return {
        type: ERASE
    }
};

And in the App.js I pass reducers, which are binded to those actions to the Calculator component:

import React, {Component} from 'react';
import Calculator from './Calculator';
import ResultLine from "./ResultLine";
import {calculate, erase, putSymbol} from "../actions/index";
import {connect} from "react-redux";

class App extends Component {

  render() {
    return (
      <div>
        <Calculator
          onSymbolClick={this.props.onSymbolClick}
          onEqualsClick={this.props.onEqualsClick}
          onEraseClick={this.props.onEraseClick}/>
        <br/>
        <ResultLine result={this.props.result}/>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log('mapState', state.calc.line);
  return {
    result: state.line
  }
};

const mapDispatchToProps = {
  onSymbolClick: putSymbol,
  onEqualsClick: calculate,
  onEraseClick: erase
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

And that works fine. Whenever I click the button the state changes, and I observe it in the console log, called in mapStateToProps function.

So I expect, that I can deliver result prop to the Result line easily, and I pass it into the ResultLine component as a parameter. So, let's look at that element:

import React from 'react';

const ResultLine = ({result}) => {
  return (
    <p>{result}</p>
  );
};

export default ResultLine;

And I can see no changes in a result line. Maybe, something wrong with the React/Redux lifecycle management and ResultLine component just does not update on changes in state?

Answer 1

There's an error on mapStateToProps.

Instead of:

const mapStateToProps = (state) => {
  return {
    result: state.line
  }
}

Please use:

const mapStateToProps = (state) => {
  return {
    result: state.calc.line // calc was missing here
  }
}