javascript - React-redux store updates but React does not -

bear me here question pertains first test app using either react, redux or react-redux. docs have gotten me far , have mock banking app works. state object looks this:

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

i have 2 actions:

1. change_hash (as in url hash). action works expected , reducer update state.activepageid (yes, i'm cloning state object , not modifying it). after action, can see state has changed in redux store , can see react has updated.

function changehash(id) {         return {             type: "change_hash",             id: id         } } 

2. add_transaction (form submission). action never updates react, updates redux store. reducer action updating state.accounts[0].balance , it's adding transaction object array state.accounts[0].transactions. don't receive errors, react doesn't update. however, if dispatch change_hash action react catch , display of add_transaction state updates properly.

function addtransaction(transaction, balance, account) { return { type: "add_transaction", payload: { transaction: transaction, balance: balance, account: account } } }

my reducer...

function bankapp(state, action) {     switch(action.type) {         case "change_hash":             return object.assign({}, state, {                 activepageid: action.id             });         case "add_transaction":         // ref account             (var = 0; < state.accounts.length; i++) {                 if (state.accounts[i].name == action.payload.account) {                     var accountindex = i;                     break;                 }             }          // wrong?             if (accountindex == undefined)  {                 console.error("could not determine account transaction");                 return state;             }          // clone state             var newstate = object.assign({}, state);          // add 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; } 

what missing here? i'm under impression react supposed update redux store updated.

github repo: https://github.com/curiousercreative/bankdemo deployment: http://curiousercreative.com/demos/bankdemo/

p.s. lied not having errors. have number of warnings ""warning: each child in array or iterator should have unique "key" prop..." i'm giving them key prop set it's index. doubt has issue though.

the problem in piece of code:

        // clone state             var newstate = object.assign({}, state);          // add new transaction             newstate.accounts[accountindex].transactions.unshift(action.payload.transaction);          // update account balance             newstate.accounts[accountindex].balance = action.payload.balance; 

cloning state object doesn't mean can mutate objects referring to. suggest read more immutability because isn't how works.

this problem , solution described in detail in redux “troubleshooting” docs suggest read them.

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

i suggest take @ shopping card example in flux comparison redux because shows how update nested objects without mutating them in similar way asking.

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