React redux mapStateToProps - cannot access state as props

Question

Very new to react and redux and cannot work out why I cannot access the state via this.props within a functional component.

Store

I create the initial state for rotating and pass this into my store upon creation.

import { createStore } from "redux";
import rotateReducer from "../reducers/rotateReducer";

const initialState = { rotating: true }

const store = createStore(rotateReducer, initialState)

export default store;

Reducer

Function to change state of rotating.

export default (state,action) => {
    if (action.type === "rotate") {
        return { rotating: action.payload }
    }
    return state;
}

Index.js

Here I import the store and Provider and wrap the App component passing in store as a prop.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import  store  from "./store/store";

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

App.js

Main component where I am trying to load the props, but keeping getting "cannot read property 'props' of undefined"

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { connect } from "react-redux";
import { startAction } from "./actions/startAction";
import { stopAction } from "./actions/stopAction";

function App() {
  return (
    <div className="App">
      <header className="App-header">
      <img 
          src={logo} 
          className={
            "App-logo" + 
            (this.props.rotating ? "":" App-logo-paused")
          } 
          alt="logo" 
          onClick={
            this.props.rotating ? 
              this.props.stopAction : this.props.startAction
          }
        />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

const mapStateToProps = state => ({
  ...state
});


const mapDispatchToProps = dispatch => {
  return {
    startAction: () => dispatch(startAction),
    stopAction: () => dispatch(stopAction)
  }

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

you need to use class based component, in functional component the this variable points to the global object — BILAL

torquan torquan · Accepted Answer · 2020-04-03T09:50:45

You should put props as a paramter:

function App(props) {
  console.log(props)

  return(/* .... */)
}

Try this and check the console output. (this.props would work in a class component, but I prefer to use function components)

I usually only add the parts of the state that I need:

function mapStateToProps(state) {
  return {
    rotating: state.rotating
  }
}

And then:

function App({rotating, /* more variables */}) {
  console.log(rotating)

  return(/* .... */)
}

React redux mapStateToProps - cannot access state as props

1 Answers