React-Redx магазин обновлений, но React нет

Question

Имейте в виду, что этот вопрос относится к моему первому тестовому приложению, использующему React, Redux или Reaction-Redux. Документы далеко ушли, и у меня есть фиктивное банковское приложение, которое в основном работает. Мой объект состояния выглядит примерно так:

{
 activePageId: "checking",
 accounts: [
  checking: {
    balance: 123,
    transactions: [
      {date, amount, description, balance}
    ]
  }
 ]
}

У меня всего два действия:

1. CHANGE_HASH (как в хеше URL). Это действие всегда работает, как и ожидалось, и все, что делает редуктор, это обновляет state.activePageId (да, я клонирую объект состояния, а не изменяю его). После действия я вижу, что состояние изменилось в хранилище Redux, и я вижу, что React обновился.

function changeHash(id) {
        return {
            type: "CHANGE_HASH",
            id: id
        }
}

2. ADD_TRANSACTION (отправка формы). Это действие никогда не обновляет React, но оно всегда обновляет хранилище Redux. Редуктор для этого действия обновляет state.accounts[0].balance и добавляет объект транзакции в массив state.accounts[0].transactions. Я не получаю никаких ошибок, React просто не обновляется. ОДНАКО, если я отправлю действие CHANGE_HASH, React догонит и отобразит все обновления состояния ADD_TRANSACTION правильно.

функция addTransaction(транзакция, баланс, счет) { return {тип: "ADD_TRANSACTION", полезная нагрузка: {транзакция: транзакция, баланс: баланс, счет: счет} } }

Мой редуктор...

function bankApp(state, action) {
    switch(action.type) {
        case "CHANGE_HASH":
            return Object.assign({}, state, {
                activePageId: action.id
            });
        case "ADD_TRANSACTION":
        // get a ref to the account
            for (var i = 0; i < state.accounts.length; i++) {
                if (state.accounts[i].name == action.payload.account) {
                    var accountIndex = i;
                    break;
                }
            }

        // is something wrong?
            if (accountIndex == undefined)  {
                console.error("could not determine account for transaction");
                return state;
            }

        // clone the state
            var newState = Object.assign({}, state);

        // add the new transaction
            newState.accounts[accountIndex].transactions.unshift(action.payload.transaction);

        // update account balance
            newState.accounts[accountIndex].balance = action.payload.balance;

            return newState;
        default:
            return state;
    }

Моя карта StateToProps

function select(state) {
    return state;
}

Что мне здесь не хватает? У меня сложилось впечатление, что React должен обновляться по мере обновления магазина Redux.

Репозиторий Github: https://github.com/curiousercreative/bankDemo Развертывание: http://curiousercreative.com/demos/bankDemo/

PS Я солгал о том, что не было ошибок. У меня есть несколько предупреждений "" Предупреждение: у каждого дочернего элемента в массиве или итераторе должна быть уникальная "ключевая" опора..."Я уже даю им ключевую опору, установленную для его индекса. Я сомневаюсь, что это что-то сделать с моей проблемой, хотя.

Answer 1

Проблема в этом куске кода:

// clone the state
var newState = Object.assign({}, state);         

// add the new transaction

newState.accounts[accountIndex].transactions.unshift(action.payload.transaction);

// update account balance
newState.accounts[accountIndex].balance = action.payload.balance;

Клонирование объекта состояния не означает, что вы можете изменять объекты, на которые он ссылается. Я предлагаю вам прочитать больше об неизменности, потому что это не так.

Эта проблема и ее решение подробно описаны в документации Redux "Устранение неполадок", поэтому я предлагаю вам прочитать их.

https://redux.js.org/troubleshooting

Я также предлагаю вам взглянуть на пример Shopping Card в Flux Comparison for Redux, потому что он показывает, как обновлять вложенные объекты, не изменяя их аналогично тому, что вы запрашиваете.

https://github.com/voronianski/flux-comparison/tree/master/redux