React and Redux: Part 1

Getting Started with React Redux

Let's just go over what we have learned so far from FreeCodeCamps lessons. React is a view library that you provide with data, then it renders the view in an efficient way.

Redux is a state management framework that you can use to simplify the management of your application's state.

Basically, in a React Redux app, you create a single Redux store that manages the state of your entire app.

Your React components subscribe to only the pieces of data in the store that are similar to their role. Then, you dispatch actions directly from React components, which then trigger store updates.

Over the course of these next post/small helpful articles, we'll create a simple React component which allows you to input new text messages. Which are then added to an array that's displayed in the view.

Next, we'll create a Redux store and actions that manage the state of the messages array. When all of that is set and done, we'll use react-redux to connect the Redux store with your component, then extracting the local state into the Redux store.

class DisplayMessages extends React.Component {

  render() {
    return <div />
  }
};

Here we start with a DisplayMessages component. We need to add a constructor to this component and initialize it with a state that has two properties: input, that is set to an empty string and messages set to an empty array.

class DisplayMessages extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  render() {
    return <div />
  }
};

Manage State Locally First

Here we'll finish creating the DisplayMessages component.

We first need to in render() method have the component render an input element, button element, and ul element.

When the input element changes, it should trigger a handleChange() method. Also the input element should render the value of input that's in the component's state. The button element will trigger a submitMessage() method when it's clicked.

Now, we should be writing these two methods. The handleChange() method should update the input with what the user is typing and the submitMessage() should concatenate the current message(stored in input) to the messages array in local state, and clear the value of the input.

With the ul we need to map over the array of messages and render it to the screen as a list of li elements.

FreeCodeCamp wants a lot but it's not too complicated.

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  // Add handleChange() and submitMessage() methods here

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* Render an input, button, and ul below this line */ }

        { /* Change code above this line */ }
      </div>
    );
  }
};

Answer:

class DisplayMessages 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,
      messages: this.state.messages
    })
  }
  submitMessage() {
    this.setState({
       input: '',
       messages: [...this.state.messages, this.state.input]
    })
  }

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input onChange={this.handleChange} value={this.state.input}></input>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>{this.state.messages.map(l => <li>{l}</li>)}</ul>
      </div>
    );
  }
};

Extract State Logic To Redux

Now that we have finished the React Component, we need to move the logic it's performing locally in its state into Redux.

This is the first step to connect the simple React app to Redux. The only thing our app can do at the moment is add new messages from the user to an unordered list.

The instructions that freeCodeCamp has asked of us is actually quite easy.

First, the want us to define an action type ADD and set it to a const ADD. Then, define an action creator addMessage() which creates the action to add a message. We need to pass a message to this action creator and include the message in the returned action. With it return an object with type equal to ADD and message equal to the message that is passed in.

Now they want us to create a reducer called messageReducer() that handles the state for the messages. The initial state should equal an empty array. This reducer should add a message to the array of messages held in state, or return the current state. Finally, create your Redux store and pass it the reducer.

Answer:

const ADD = 'ADD'

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

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

  }
}


const store = Redux.createStore(messageReducer)