Подтвердить что ты не робот

React-redux сохраняет обновления, но React does not

Потерпите меня здесь, поскольку этот вопрос относится к моему первому тестовому приложению, используя либо React, Redux, либо react-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 и добавление объекта транзакции в состояние массива .accounts [0].transactions. Я не получаю никаких ошибок, React просто не обновляется. ОДНАКО, если я отправлю CHANGE_HASH действие React догонит и правильно отобразит все состояния ADD_TRANSACTION.

функция addTransaction (транзакция, баланс, учетная запись) {   вернуть {       type: "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;
    }

My mapStateToProps

function select(state) {
    return state;
}

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

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

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

4b9b3361

Ответ 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 "Устранение неполадок", поэтому я предлагаю вам их прочитать.

http://redux.js.org/docs/Troubleshooting.html

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

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