provider-redux-tasks1

import React, { Component } from 'react';

// Must use connect() here because we have our App.js wrapped in a Provider.
// Once there's a change in the state, the Provider will re-render this component
// because it is a child of App.js
import { connect } from 'react-redux';

//Below we are exporting the Tasks class so that we can call it in our
//connect(), method on the bottom. 
 export class Tasks extends Component {

  render() {
    // this props.tasks would not have existed without using the connect()
    // and classifying what tasks would be.
    const tasks = this.props.tasks.map((task, index) => <li key={index}>{task}</li>)


    return (
      <div>
        <ul>
          {tasks}
        </ul>
      </div>
    )
  }
}

// We are now turning the state attributes into props for this component only. 
const mapStateToProps = (state) => {
   return {
     tasks: state.tasks
   };
 };

// Make sure that the const variable is in uppercase.
// By using connect(), We are making the state information
// available to the Tasks class as props.
// calling this.props would look like the following:
// Object { tasks: Array(0), dispatch: function }
export const AllTasks = connect(mapStateToProps)(Tasks);