javascript - 根据 Redux State 对 Array 进行排序，然后更改 State

Question

我有一个 Redux 内存应用程序，在我的 Redux 状态下，我有一个包含 16 个卡对象的数组。我想根据名为的 Redux 状态属性随机化 Card 对象数组randomize

我试图从减速器中对卡片进行排序并删除randomize属性：

const INITIAL_STATE = {
 deck: sort([{name: "Card 1"}, {...}, ...]),
 ...
}

但这弄乱了我在 4x4 字段中的 onClicks。当我点击一张卡片时，会选择一张与我点击的卡片不同的卡片。该sort算法不应该是问题：

function sort(cards) {
  const deck = cards;

  let currentIndex = deck.length;
  let temporaryValue;
  let randomIndex;

  while (currentIndex !== 0) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = deck[currentIndex];
    deck[currentIndex] = deck[randomIndex];
    deck[randomIndex] = temporaryValue;
  }

  return deck;
}

我想在一个名为的无状态组件中对卡片进行排序：

import { connect } from "react-redux";
import { select_card } from "../Redux/Actions/actions";
import CardField from "./CardField";

const getRandomizedDeck = (deck, randomize) => {
  if (randomize) {
    return sort(deck);
    // Change randomize to false somewhere
  }
};

const mapStateToProps = state => ({
  deck: getRandomizedDeck(state.deck, state.randomize),
  backside: state.backside
});

const mapDispatchToProps = dispatch => ({
  onClick: (id, name) => {
    dispatch(select_card(id, name));
  }
});

const RandomizedDeck = connect(
  mapStateToProps,
  mapDispatchToProps
)(CardField);

export default RandomizedDeck;

标签： javascriptreact-redux

Answer 1

我发现我的问题不在于排序或调度操作，而是我的减速器id在卡片排序后检查错误。

为了回答我的问题，我发现最好添加一个名为的操作RESET_GAME，并让这个操作在减速器中对我的卡片进行排序，如下所示：

    case RESET_GAME: {
      return {
        ...state,
        currentPlayer: 1,
        deck: state.deck
          .map(card => ({ ...card, selected: false, open: false }))
          .sort(() => Math.random() - 0.5),
        playerInfo: state.playerInfo.map(player => ({ ...player, points: 0 }))
      };
    }