Cfrgtkky

I connected a component to the store in a way that it's able to dispatch actions and receive state. The dispatch works and I can see the state change in the Redux dev tool. However, I'm unable to pass the state back to the component. What am I missing here?

Component

The toggle() and addTask() are successfully dispatched. However, the newTask doesn't receive the state.

class AddTask extends React.Component {

  state = {

    value: '',

  };



  setValue = value => this.setState({ value });



  handleInput = () => !this.props.newTask ? 'hidden' : '';

  handleToggle = () => this.props.toggle();



  handleSubmit = (e) => {

    e.preventDefault();

    const title = this.state.value;

    this.props.addTask(title);

    this.props.toggle();

  };



  render() {

    return (

      <div className="add-task">

        <div className="btn-add-task">

          <Button 

            type="LINK" 

            label="Add a Task" 

            onClick={this.handleToggle}

          />

        </div>

        <form 

          className={`task-input ${this.handleInput()}`} 

          onSubmit={this.handleSubmit}

        >

          <InputField

            placeholder="Task title"

            value={value => this.setValue(value)}

          />

        </form>

      </div>

    );

  }

};



export default AddTask;

Container

import { bindActionCreators } from 'redux';

import { connect } from 'react-redux';



import AddTask from './TaskList/AddTask/AddTask';



import * as actionCreators from '../actions/taskActions';



const mapStateToProps = state => ({

  newTask: state.newTask,

});



const mapDispatchToProps = dispatch => (

  bindActionCreators(actionCreators, dispatch)

);



export default connect(

  mapStateToProps,

  mapDispatchToProps,

)(AddTask);

Reducer

import {

  TOGGLE_TASK,

} from '../constants/actions';



const uiReducer = (state = {

  newTask: false,

}, action) => {

  switch (action.type) {

    case TOGGLE_TASK:

      return {

        ...state,

        newTask: !state.newTask,

      };

    default:

      return state;

  }

};



export default uiReducer;

Store

const initialState = {

  tasks: [

    {

      title: 'Title A', description: 'Description A', effort: '12 hrs', editing: 'false',

    },

    {

      title: 'Title B', description: 'Description B', effort: '24 hrs', editing: 'false',

    },

    {

      title: 'Title C', description: 'Description C', effort: '', editing: 'false',

    },

  ],

  ui: {

    newTask: false,

  },

};

Print

tasks: Array(4)

0: {title: "Title A", description: "Description A", effort: "12 hrs", editing: "false"}

1: {title: "Title B", description: "Description B", effort: "24 hrs", editing: "false"}

2: {title: "Title C", description: "Description C", effort: "", editing: "false"}

3: {id: "", title: "asdfasd", description: undefined}

length: 4

__proto__: Array(0)

ui:

newTask: false

Thanks!