reactjs - 用于管理多个 React 组件实例的 Redux 状态形状？

Question

我正在使用 React 和 Redux 开发一个小项目，在这个项目中我正在制作一个本质上是 Trello 克隆或看板系统的东西。但是我无法弄清楚如何为 Redux 构建我的状态，以免事情变得奇怪。

本质上，用户需要能够创建 <Board/> 的多个实例通过 React 组件。每个<Board/>实例有一个标题。继续向下钻取，每个</Board>实例也可以有自己的数组 <List/>组件实例。每个<List/>实例又可以有自己的 <Card/>组件实例。

这是我感到困惑的地方。在 React 中，这很简单——<Board/> 的每个实例和 <List/> 的每个实例只是管理自己的状态。但我不知道如何重构所有内容，以便 Redux 管理所有 状态，但每个组件实例都会收到正确的slice 状态。

到目前为止，我构建的 Redux 状态如下所示。感谢您的帮助!

{
  boards: [
    {
      title: 'Home',
      lists: [
        {
          title: 'To Do',
          cards: [
            { title: 'Finish this project.'},
            { title: 'Start that project.'}
          ]
        },
        {
          title: 'Doing',
          cards: []
        },
        {
          title: 'Done',
          cards: []
        }
      ]
    }
  ]
}

Answer 1

redux基本上是一个全局存储对象。所以理论上这与使用 react 没有什么不同没有redux但将商店保持在最顶级组件的状态。

当然有 redux我们获得了许多其他好东西，使它成为一个伟大的状态管理者。但是为了简单起见，让我们关注 React 组件之间的状态结构和数据流。

让我们同意，如果我们有一个全局存储来保存我们的单一事实来源，那么我们就不需要在我们的子组件中保留任何本地状态。
但是我们确实需要在我们的 react 流中分解和组装我们的数据，所以一个很好的模式是创建一些组件，这些组件只获取相关数据的 id 和处理程序，以便它们可以将数据发送回具有相应 id 的父级。这样父级就可以知道哪个实例是调用处理程序的实例。

所以我们可以有一个<Board />呈现 <List />呈现一些 <Cards />每个实例都有自己的 id并将获取所需的数据。
假设我们要支持 addCard和 toggleCard行动，我们需要为此更新情侣级别的商店。

要切换卡片，我们需要知道:

1. 什么是 Card我们刚刚点击的id
2. 什么是 List这张卡所属的id
3. 什么是 Board此列表所属的 ID

要添加卡片，我们需要知道:

1. 什么是 List我们点击的 ID
2. 什么是 Board此列表所属的 ID

看似相同的模式，但层次不同。

为此，我们需要传递 onClick每个组件的事件，该组件将在传递它自己的 id 时调用它给 parent ， parent 又会调用它的onClick通过 child 的事件 id 和它是自己的id所以下一个 parent 会知道哪些 child 实例被点击了。

例如:
Card将调用:

this.props.onClick(this.props.id)

List将聆听并调用:

onCardClick = cardId => this.props.onClick(this.props.id,cardId);

Board将 llisten 并将调用:

onListClick = (listId, cardId) => this.props.onClick(this.props.id, listId, cardId)

现在我们的 App也可以收听，此时它将拥有执行更新所需的所有必要数据:

onCardToggle(boardId, listId, cardId) => dispatchToggleCard({boardId, listId, cardId})

从这里开始由 reducer 来完成他们的工作。

查看组件如何向上传输数据，每个组件收集其子组件发送的数据并将其向上传递，同时添加自己的另一条数据。收集少量数据，直到最顶层的组件获得执行状态更新所需的所有数据。

我已经用你的场景做了一个小例子，注意我没有使用 redux由于堆栈片段的限制。然而，我确实写了 reducer 以及更新和数据流的整个逻辑，但我跳过了 action creators 部分并连接到实际的 redux店铺。

我认为它可以让您了解如何构建存储、reducer 和组件。

function uuidv4() {
  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  )
}

class Card extends React.Component {
  onClick = () => {
    const { onClick, id } = this.props;
    onClick(id);
  }
  render() {
    const { title, active = false } = this.props;
    const activeCss = active ? 'active' : '';
    return (
      <div className={`card ${activeCss}`} onClick={this.onClick}>
        <h5>{title}</h5>
      </div>
    );
  }
}

class List extends React.Component {
  handleClick = () => {
    const { onClick, id } = this.props;
    onClick(id);
  }

  onCardClick = cardId => {
    const { onCardClick, id: listId } = this.props;
    onCardClick({ listId, cardId });
  }

  render() {
    const { title, cards } = this.props;
    return (
      <div className="list">
        <button className="add-card" onClick={this.handleClick}>+</button>
        <h4>{title}</h4>
        <div>
          {
            cards.map((card, idx) => {
              return (
                <Card key={idx} {...card} onClick={this.onCardClick} />
              )
            })
          }
        </div>
      </div>
    );
  }
}

class Board extends React.Component {
  onAddCard = listId => {
    const { onAddCard, id: boardId } = this.props;
    const action = {
      boardId,
      listId
    }
    onAddCard(action)
  }
  onCardClick = ({ listId, cardId }) => {
    const { onCardClick, id: boardId } = this.props;
    const action = {
      boardId,
      listId,
      cardId
    }
    onCardClick(action)
  }
  render() {
    const { title, list } = this.props;
    return (
      <div className="board">
        <h3>{title}</h3>
        {
          list.map((items, idx) => {
            return (
              <List onClick={this.onAddCard} onCardClick={this.onCardClick} key={idx} {...items} />
            )
          })
        }
      </div>
    );
  }
}


const cardRedcer = (state = {}, action) => {
  switch (action.type) {
    case 'ADD_CARD': {
      const { cardId } = action;
      return { title: 'new card...', id: cardId }
    }
    case 'TOGGLE_CARD': {
      return {
        ...state,
        active: !state.active
      }
    }
    default:
      return state;
  }
}

const cardsRedcer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_CARD':
      return [...state, cardRedcer(null, action)];
    case 'TOGGLE_CARD': {
      return state.map(card => {
        if (card.id !== action.cardId) return card;
        return cardRedcer(card, action);
      });
    }
    default:
      return state;
  }
}

const listReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_CARD': {
      const { listId } = action;
      return state.map(item => {
        if (item.id !== listId) return item;
        return {
          ...item,
          cards: cardsRedcer(item.cards, action)
        }
      });
    }
    case 'TOGGLE_CARD': {
      const { listId, cardId } = action;
      return state.map(item => {
        if (item.id !== listId) return item;
        return {
          ...item,
          cards: cardsRedcer(item.cards,action)
        }
      });
    }
    default:
      return state;
  }
}

class App extends React.Component {
  state = {
    boards: [
      {
        id: 1,
        title: 'Home',
        list: [
          {
            id: 111,
            title: 'To Do',
            cards: [
              { title: 'Finish this project.', id: 1 },
              { title: 'Start that project.', id: 2 }
            ]
          },
          {
            id: 222,
            title: 'Doing',
            cards: [
              { title: 'Finish Another project.', id: 1 },
              { title: 'Ask on StackOverflow.', id: 2 }]
          },
          {
            id: 333,
            title: 'Done',
            cards: []
          }
        ]
      }
    ]
  }

  onAddCard = ({ boardId, listId }) => {
    const cardId = uuidv4();
    this.setState(prev => {
      const nextState = prev.boards.map(board => {
        if (board.id !== boardId) return board;
        return {
          ...board,
          list: listReducer(board.list, { type: 'ADD_CARD', listId, cardId })
        }
      })
      return {
        ...prev,
        boards: nextState
      }
    });
  }

  onCardClick = ({ boardId, listId, cardId }) => {
    this.setState(prev => {
      const nextState = prev.boards.map(board => {
        if (board.id !== boardId) return board;
        return {
          ...board,
          list: listReducer(board.list, { type: 'TOGGLE_CARD', listId, cardId })
        }
      })
      return {
        ...prev,
        boards: nextState
      }
    });
  }

  render() {
    const { boards } = this.state;
    return (
      <div className="board-sheet">
        {
          boards.map((board, idx) => (
            <Board
              id={board.id}
              key={idx}
              list={board.list}
              title={board.title}
              onAddCard={this.onAddCard}
              onCardClick={this.onCardClick}
            />
          ))
        }
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

.board-sheet{
  padding: 5px;
}

.board{
  padding: 10px;
  margin: 10px;
  border: 1px solid #333;
}

.list{
  border: 1px solid #333;
  padding: 10px;
  margin: 5px;
}

.card{
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 5px;
    margin: 5px;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 2px 1px #333;
}

.card.active{
  background-color: green;
  color: #fff;
}

.add-card{
  cursor: pointer;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>