Question

使用React和Redux处理一个小项目，我在其中制作了本质上是Trello克隆或看板系统。但是我很难弄清楚如何为Redux构建我的状态，这样事情就不会变得怪异。

基本上，用户需要能够通过React创建<Board/>组件的多个实例。每个<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我们获得了许多其他好东西，使其成为一名出色的州长。但是为了简单起见，我们要关注反应组件之间的状态结构和数据流。

让我们同意，如果我们有一家全球商店来保存我们的单一事实来源，那么我们就不需要将任何本地州保留在我们的子组件中。
但我们确实需要在我们的反应流中拆分和组装我们的数据，所以一个很好的模式是创建一些组件，只需将相关数据作为id和处理程序，这样他们就可以将数据发送回具有相应id的父项。这样父进程可以告诉哪个实例是调用处理程序的实例。

因此，我们可以使用<Board />呈现<List />呈现一些<Cards />，并且每个实例都拥有它自己的id并获取数据它需要。
假设我们希望支持addCard和toggleCard操作，我们需要为此更新我们的商店。

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

我们刚刚点击的Card ID是什么
此卡所属的List ID是什么
此列表属于的Board ID是什么

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

我们点击的List ID是什么
此列表属于的Board ID是什么

似乎是相同的模式但具有不同的级别。

要做到这一点，我们需要将onClick个事件传递给每个组件，这个组件会在将它自己的id传递给父组件时调用它，然后parrent将调用它＆＃39; onClick事件在传递孩子的id 和时自己id，以便下一位家长知道哪个孩子正在点击实例。

例如：
Card将调用：

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

List会监听并调用：

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

Board将继续并将调用：

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

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

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

从这里到减速机就可以完成它们的工作。

查看组件如何向上传输数据，每个组件收集从其子组件发送的数据并向上传递数据，同时添加自身的另一个数据。汇总了一小部分数据，直到最顶层的组件获得执行状态更新所需的所有数据。

我已经根据您的方案做了一个小例子，请注意，由于堆叠片段的限制，我没有使用redux。我确实编写了reducers以及更新和数据流的整个逻辑，但是我跳过了动作创建者部分并连接到实际的redux商店。

我认为它可以让您了解如何构建商店，减速器和组件。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: