«Redux» не определен ... а также ReactRedux и ReactDOM

Question

Я работаю над упражнением React / Redux на FreeCodeCamp.org. После завершения упражнения я хочу сделать шаг вперед, внедрив его на локальном хосте, а затем развернув на github.

До сих пор я использовал npx create-react-app {appname} в узле. Заменен исходный файл приложения. js с моим собственным кодом, который я имею ниже, и попытался локально разместить с npm start на узле.

Когда это не сработало, я немного погуглил и нашел следующую команду для установки приставки npm install redux react-redux redux-thunk --save. когда это не помогло, я попытался добавить четвертую строку моего кода import { createStore } from 'redux';

В настоящее время я сталкиваюсь с текущей ошибкой

Что я могу сделать, чтобы мое приложение было размещено локально, чтобы я мог перейти к следующему этапу развертывания его на Github?

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { createStore } from 'redux';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <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>
  );
}

export default App;
// Redux:
const ADD = 'ADD';

const addMessage = (message) => {
  return {
    type: ADD,
    message: message
  }
};

const messageReducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [
        ...state,
        action.message
      ];
    default:
      return state;
  }
};

const store = Redux.createStore(messageReducer);

// React:
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// Change code below this line
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {
    this.setState({
      input: '',
      messages: this.state.messages.concat(this.state.input)
    });
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
          {this.state.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};
// Change code above this line

const mapStateToProps = (state) => {
  return {messages: state}
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message))
    }
  }
};

const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

class AppWrapper extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Container/>
      </Provider>
    );
  }
};

ReactDOM.render(<AppWrapper/>, document.getElementById("root"))

Answer 1

вы их не импортировали;

import ReactDOM from 'react-dom';
import Redux from 'redux';
import ReactRedux from 'react-redux';

кстати, есть более чистый способ импортировать то, что вам нужно. для этого вам потребуется небольшой рефакторинг:

import {render} from 'react-dom';
import {Provider, createStore} from 'redux';
import {connect} from 'react-redux';

Вы поймете, что вместо импорта экспорта по умолчанию вы импортируете выборочно, а в своем коде просто используйте named import вместо default.name (например,

ReactDOM.render(<AppWrapper/>, document.getElementById("root")) становится

render(<AppWrapper/>, document.getElementById("root"))

Проверьте этот SO ответ для дальнейшего чтения