Потерпите меня здесь, поскольку этот вопрос относится к моему первому тестовому приложению, используя либо 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. Я солгал, что у меня нет ошибок. У меня есть несколько предупреждений "Предупреждение: каждый дочерний элемент в массиве или итераторе должен иметь уникальную" ключевую "опору..." Я уже даю им ключевую опору, установленную для этого индекса. Я сомневаюсь, что есть что угодно сделайте с моей проблемой хотя.