Louiefigz

import React from 'react';



class Todo extends React.Component{
  constructor(){
    super();
    this.state={
      complete: false
    }

Louiefigz

import React, { Component } from "react";
import { connect } from 'react-redux';
import { addTask } from '../actions/TaskAction';

// Using bindActionCreators allows us make a dispatch just from using an action.
// Similar to binding a variable to an object.
import { bindActionCreators } from 'redux';

Louiefigz

import React, { Component } from "react";
import { connect } from 'react-redux';

//Add the Code below to add the action addTask.
import { addTask } from '../actions/TaskAction';


class UserInput extends Component {

  constructor(props) {

Louiefigz

//TaskAction.js
//We are packaging the data for the reducer. 

export const addTask = (task) => {
  return {
    type: 'ADD_TASK',
    task
  };
};

Louiefigz

import React, { Component } from "react";


// we are new requiring connect.  Essentially, it allows our component to have
// access to the state and have the ability to manipulate the information using
// an outside function.
import { connect } from 'react-redux';

// Taking away export from this class.
class UserInput extends Component {

Louiefigz

import React, { Component } from 'react';
import UserInput from "./components/UserInput";

// We change the below from { AllTasks } to Tasks because we are
// exporting with default meaning there are no libraries that we are
// pulling from. Just the class Tasks.
import Tasks from './components/Tasks';


class App extends Component {

Louiefigz

import React, { Component } from 'react';
import { connect } from 'react-redux';


class Tasks extends Component {
  render() {
    const tasks = this.props.tasks.map((task, index) => <li key={index}>{task}</li>)
    return (
      <div>
        <ul>

Louiefigz

import React, { Component } from "react";


 export default class UserInput extends Component {

  constructor(props) {
    super(props);

    this.state = {
      task: ''

Louiefigz

import React, { Component } from 'react';
//When we use export default on a component, we would import that component without
// curly braces like UserInput Below.
import UserInput from "./components/UserInput";
//When we export a component without default:
// example: export class Test extends Component
// We would need to specify the class or constant within {}.
// In this case, we are extracting Test which means it's being exported
// without default.
import { AllTasks } from './components/Tasks';

Louiefigz

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

// Requiring the Reducer that we just made
import manageTasks from './reducers/manageTodo';

// set a store variable and then we are going to place it as a prop