React: Connect Redux to the Messages App

hello,
Connect Redux to the Messages App
What is container, there isn’t container component in the the code.
I don’t understand anything about redux anymore:

// 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:
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() {
    const currentMessage = this.state.input;
    this.setState({
      input: '',
      messages: this.state.messages.concat(currentMessage)
    });
  }
  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>
    );
  }
};

// React-Redux:
const mapStateToProps = (state) => {
  return { messages: state }
};

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

const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// define the Container component here:
const Container = connect(mapStateToProps,mapDispatchToProps)(Presentational)

class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // complete the return statement:
    return (
      <Provider store={store}>
        <Container />
      </Provider>
      );
  }
};

There is a design pattern in React/Redux where if you need redux or outside services, you create two components. The container connects to redux, etc. and then injects it into a presentational component that just handles what shows up on the screen.

It is just a common design pattern. You don’t have to do it. You could have one large component that does both.

When learning redux, I think you have to just take some things on faith for a while. If I was teaching you how an engine works, I couldn’t show you everything at once. We might first learn what gas is. Then we’d learn about spark plugs. Then we’d learn about pistons. Then… You’d have to learn each part without understanding the big picture.

Redux is a very different way of thinking. FCC isn’t really set up to give long, wordy lessons of high level ideas. I would suggest perhaps looking for some videos explaining the basics of Redux.

But again, it’s very confusing at first. I actually was using Redux in a few projects before things started to click.

it’s also difficult with VueJS ?

I haven’t used VueJS. But I imagine that integrating Redux with that would be roughly the same as integrating it with React.

There are going to be a lot of confusing things when you learn coding. That is part of the job - it is a hard job - that is why it pays well.

I’m trying to tell you that it is normal for you to be confused by this. Redux confused the hell out of me for a while. I couldn’t understand why it was so complicated. I couldn’t understand why I was doing certain things. I had to use it for a while to really get it. Then I understood why. Even then it still took a while to fully understand.

Embrace the challenge - there will be plenty of them. Think of how proud you will be when you get this under your belt. And you’ll also have a very powerful tool in your toolbox.

1 Like

If I may say so, you are going into too much details. If we can’t really understand because we don’t know what gaz is then there’s no need to go into so much detail. It would just be necessary to give a recipe that works and to apply on the projects. It doesn’t matter how an engine works if you just want just to drive.

You can drive all you want. Use web pages. But if you want to learn how to build engines (web pages) then you have to learn how the engine works.

But you can build web pages without Redux. You can even use React without Redux. But this is what FCC is teaching.

If you know an easier way to teach and understand Redux, then please share it or create your own system. Having worked as a professional React/Redux developer (after struggling for a long time), I think this is a reasonable approach. But again, FCC isn’t really set up for wordy, high level explanations, so I 100% recommend seeking some out. I’d bet money that FCC has some videos out there. Actually with a quick search, I found some.

FCC doesn’t claim to be a comprehensive deep dive into every topic. You have to do some research. But that is how web dev is.

Just today I had to figure out how to do something with an NPM package. I had to spend 15 minutes on Stack Overflow and then another 30 minutes in the documentation then another hour experimenting to figure it out. Most programming challenges won’t come with a simple tutorial laying it all out for you. Researching and figuring things out is part of the job. It gets easier - if you practice it.

I didn’t mean to sound critical.
I’m losing a little patience because I’m learning a lot of things but I still don’t practice. I haven’t done anything yet. I look forward to doing things. But you’re right, over time by returning to the subjects we ended up familiarizing ourselves. So I must not lose patience and learn, learn and learn.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.