React and Redux: Part 1
Tags: javascript, webdev, beginners, react
Published: 2022-01-02 15:55:16

####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.

```react
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.

```react
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.

```react
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:
```react
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:

```react
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)
```