ReactRedux error

JavaScript
1

Hi,
I am trying to code the ReactRedux ToDo tutorial in the local system but I am getting this error message.

Failed to compile.

./src/App.js
147:15-25 ‘react-redux’ does not contain an export named ‘ReactRedux’.

Here is my code.

import React, { Component } from 'react';
import './App.css';

// Redux Store
import Redux from 'react-redux';
import ReactRedux from 'react-redux';

const ADD = 'ADD';

function addMessage(msg) {
    return{
        type: ADD,
        message: msg
    }
}

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

const store = Redux.createStore(messageReducer);

// React Component
class App extends 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(event) {
    event.preventDefault();
    this.setState({
      messages: [...this.state.messages, this.state.input],
      input: ''
    })
  }


  render() {
    return (
      <div className="App">
        <form onSubmit={this.submitMessage}>
          <input value={this.state.input} type="text" onChange={this.handleChange} />
          <button type="submit">Add message</button>
        </form>

        <ul>
          {
            this.state.messages.map(item => <li>{item}</li>)
          }
        </ul>
      </div>
    );
  }
}

const Provider = ReactRedux.Provider;

class AppWrapper extends React.Component {
  // render the Provider here
  render() {
    return(
      <Provider store={store}>
        <App />
      </Provider>
    )
  }
  // change code above this line
};


export default AppWrapper;
2

Hi @Randore

The npm module versions of both redux + react-redux don’t contain default imports. What that means is that you can’t declare a top level import like you have because the compiler won’t know which import you actually want to bring in.

Also, you’re trying to import redux from the react-redux package, which obviously won’t work.

Try changing the import statements like so:

import { createStore } from 'redux';
import { Provider } from 'react-redux';

Then in your code, remove any reference to Redux. and ReactRedux.

This syntax is like ES6 object destructing in that you are specificity the exact import you are looking for.

3

Thank you that helped.