davidnum95

Вы видимо на каждый запрос открываете новое соединение с базой. Так делать не нужно. Откройте соединение один раз и храните его в синглтоне.

Функция eachTask не привязана к this компонента. Нужно по аналогии с updateText привязать функцию в конструкторе:
this.updateText = this.eachTask.bind(this);

Так вы же в payload записываете объект с полем value:
payload: {value}

Забыли дописать:

case 'TOGGLE_COMPLETED':
            return Object.assign({}, state, {
                todo: state.todo.map((item) => {
                    if(item.id == action.id) {
                        item.completed = !item.completed
                    }
                    return item;
                })
            })

Хранить в стейте компонента флаг и на основе этого флага применять стили. К примеру:

import React from 'react';
import classnames from 'classnames';

class SomeComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = {
      show: false,
    };
  }

  onClick() {
    this.setState({ show: !this.state.show });
  }

  render() {
    const { show } = this.state;
    return <div onClick={this.onClick} className={classnames('some-class', { 'change-class': show })} />;
  }
}

export default SomeComponent;

Тут два варианта:
1. Подписаться на поле которое отвечает за текущий тип сайдбара в main компоненте, например

class MainComponent extends React.Component {
  static propTypes = {
    activeType: PropTypes.string,
  }

  static mapStateToProps(state) {
    return {
      activeType: state.sideBar.activeType,
    };
  }
// ....
export default connect(
  MainComponent.mapStateToProps,
  {})(MainComponent);

2. Подписаться на изменение селекта сайдбара в редьюсере main компонента:

import { CHANGE_TYPE as SIDEBAR_CHANGE_TYPE } from '../SideBar/constants';

const initState = {
  activeType: undefined,
};

export default (state = initState, action) => {
  switch (action.type) {
    case SIDEBAR_CHANGE_TYPE:
      return {
        ...state,
        activeType: action.payload,
      };
    // ....
    default:
      return state;
  }
};

С помощью drawable

Попробуйте так:

public function fields()
    {
        return [
            ...
            'firms' => function () {
                return $this->firms;
            },
        ];
    }

Как вариант:

componentDidMount() {
    document.addEventListener('click', this.onClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onClickOutside);
  }

  onClickOutside = () => {
    this.setState({ visible: false });
  }