带有React / Redux的模态

Question

我正在管理我的应用程序中的待办事项列表。主视图是一个页面，其中所有列表都显示为卡。如果单击其中之一，则可以通过显示的模式来修改，更新和删除内容。

我有一个TodoLists缩减器，用于存储所有TodoLists。我不知道该如何处理模式。我应该使用redux还是仅使用本地状态？

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);