Модальное состояние с реакцией / редукцией

Question

Я управляю списками Todo в моем приложении.Основным видом является страница со всеми списками, отображаемыми в виде карточек.Если вы щелкнете по одному из них, вы сможете изменять, обновлять, удалять вещи через модальное окно, которое появляется.

У меня есть редуктор TodoLists, в котором хранятся все TodoLists.Я не знаю, как справиться с модальным.Должен ли я использовать избыточный или только местный штат?

import _ from "lodash";
import React from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";

import { listsActions } from "../duck";

import NewList from "./NewList";
import Card from "./Card";
import Modal from "./Modal";

class Lists extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modal: false,
      list: {}
    };

    this.hideModal = this.hideModal.bind(this);
    this.renderModal = this.renderModal.bind(this);
  }

  componentDidMount() {
    const { fetchByUserId, user } = this.props;
    if (user !== undefined) {
      fetchByUserId(user.id);
    }
  }

  hideModal() {
    this.setState({
      modal: false
    });
  }

  renderModal() {
    this.setState({
      modal: true
    });
  }

  render() {
    const { items } = this.props;
    const { modal, list } = this.state;
    return (
      <div>
        <NewProject />
        <div className="columns">
          {_.map(items, (l) => (
            <div
              key={l.id}
              className="column"
            >
              <Card
                list={l}
                onClick={() => this.renderModal(l)}
              />
            </div>
          ))}
        </div>
        <Modal
          className={modal ? "is-active" : ""}
          list={list}
          onClose={this.hideModal}
        />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  const { user } = state.authentication;
  const { items, loading, error } = state.lists;
  return {
    user,
    items,
    loading,
    error
  };
};

export default connect(
  mapStateToProps,
  { fetchByUserId: listsActions.fetchByUserId }
)(Projects);