React-redux는 업데이트를 저장하지만 React는 저장되지 않음

React-redux는 업데이트를 저장하지만 React는 저장되지 않음

이 질문은 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트랜잭션 오브젝트를 어레이에 추가합니다.state.accounts[0].트랜잭션.오류는 수신되지 않습니다.React는 업데이트되지 않습니다.단, If I dispatched a name.CHANGE_HASH action리액션이 모든 데이터를 따라잡아 표시합니다.ADD_TRANSACTION상태가 올바르게 갱신됩니다.

function addTransaction(transaction, balance, account) {
    return {
        type: "ADD_TRANSACTION",
        payload: {
            transaction: transaction,
            balance: balance,
            account: account
        }
    }
}

내 환원제...

    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;
        }

내 mapStateToProps

    function select(state) {
        return state;
    }

내가 뭘 놓쳤지?리액트가 리액션으로 업데이트 될 것 같아요Redux store갱신되었습니다.

Github repo:

도입 은행 데모

p.s. 오류가 없다고 거짓말을 했어요.몇 가지 경고가 있습니다.

경고:어레이 또는 반복기 내의 각 자녀는 고유한 "키" 프로펠러를 가져야 합니다.."

난 이미 그들에게 열쇠를 주고 있어prop인덱스로 설정합니다.그게 내 문제랑 무슨 상관이 있는 건 아닌 것 같아.

문제는 다음 코드에 있습니다.

// 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;

상태 개체를 복제한다고 해서 해당 개체가 참조하는 개체를 변환할 수 있는 것은 아닙니다.불변의 원리는 이렇지 않기 때문에 불변성에 대해 좀 더 읽어보시길 권합니다.

이 문제와 해결방법은 Redx "트러블 슈팅" 문서에 자세히 설명되어 있으므로 읽어보시기 바랍니다.

https://redux.js.org/troubleshooting

또한 Redux용 플럭스 비교의 쇼핑 카드 예시를 보시기 바랍니다.왜냐하면 이 예에서는 요청과 유사한 방식으로 중첩된 개체를 변환하지 않고 업데이트하는 방법을 알 수 있기 때문입니다.

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

언급URL : https://stackoverflow.com/questions/33140008/react-redux-store-updates-but-react-does-not