在./src/App.js'store'中的反应错误未定义

Question

attempting to follow this tutorial https://thinkster.io/tutorials/setting-up-react-redux/introducing-react-redux

App.js file-

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

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

class App extends React.Component {
  render() {
    const onClick = () => store.dispatch({ type: 'TOGGLE' });
    return (
      <div>
        { this.props.appName }
      </div>
    );
  }
}

export default connect(mapStateToProps, () => ({}))(App);

according to the video, by importing the connect function and defining mapStateToProps we will get access to store. it does not work.

also, the code in the video is different from the code in the guide. so at this point i'm not sure if i'm doing something incorrectly, or if this guide is just bad. can anyone suggest a better guide for learning react?

full error message-

Failed to compile.

Error in ./src/App.js

c:\\Sites\\react_frontend\\django-frontend\\src\\App.js

14:11 warning 'onClick' is assigned a value but never used no-unused-vars

14:27 error 'store' is not defined no-undef

✖ 2 problems (1 error, 1 warning)

Answer 1

This tutorial is not very good - a lot of things are missing.

A previous step had the following line:

const store = createStore(reducer);

Answer 2

I am also using Thinkster and the line below worked for me. I found that there is no need to provide the empty object at all.

export default connect(mapStateToProps)(App);

I agree with you that the react redux tutorial is quite poorly done. I found that the Backend Tutorials(Express and mongo) was a lot more cohesive than the front end. The tutorials linked together well and each one started where the other left off.