javascript - props - react meta tags

React-reduce las actualizaciones de la tienda pero React no lo hace

Question

Tenga paciencia conmigo ya que esta pregunta se refiere a mi primera aplicación de prueba utilizando React, Redux o react-redux. Los documentos me han llevado lejos y tengo una aplicación bancaria simulada que funciona en su mayoría. Mi objeto de estado se ve más o menos así:

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

Tengo solo dos acciones:

1. CHANGE_HASH (como en url hash). Esta acción siempre funciona como se espera y todo lo que hace el reductor es actualizar state.activePageId (sí, estoy clonando el objeto de estado y no modificándolo). Después de la acción, puedo ver que el estado ha cambiado en la tienda de Redux y puedo ver que React se ha actualizado.

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

2. ADD_TRANSACTION (envío del formulario). Esta acción nunca actualiza React, pero siempre actualiza la tienda de Redux. El reductor para esta acción está actualizando state.accounts [0] .balance y está agregando un objeto de transacción al estado de la matriz. Accounts [0] .transactions. No recibo ningún error, Reaccionar simplemente no se actualiza. SIN EMBARGO, si despacho una acción CHANGE_HASH React se pondrá al día y mostrará todas las actualizaciones de estado ADD_TRANSACTION correctamente.

function addTransaction (transacción, saldo, cuenta) {return {type: "ADD_TRANSACTION", carga útil: {transacción: transacción, saldo: saldo, cuenta: cuenta}}}

Mi reductor ...

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

Mi mapStateToProps

function select(state) {
    return state;
}

¿Que me estoy perdiendo aqui? Tengo la impresión de que se supone que React se actualizará cuando se actualice la tienda de Redux.

Repo de Github: https://github.com/curiousercreative/bankDemo Deployment: http://curiousercreative.com/demos/bankDemo/

ps. Mentí acerca de no tener ningún error. Tengo varias advertencias "" Advertencia: cada niño en una matriz o un iterador debe tener un único accesorio de "clave" ... "Ya les estoy dando un conjunto de herramientas clave para su índice. Dudo que tenga nada que ver con hacer con mi problema sin embargo.

Answer 1

El problema está en esta pieza de código:

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

La clonación del objeto de estado no significa que pueda mutar los objetos a los que se refiere. Te sugiero que leas más sobre la inmutabilidad porque así no es como funciona.

Este problema y su solución se describen en detalle en los documentos de "Solución de problemas" de Redux, por lo que le sugiero que los lea.

https://redux.js.org/troubleshooting

También sugiero que eche un vistazo al ejemplo de Tarjeta de compra en Flux Comparison for Redux porque muestra cómo actualizar objetos anidados sin mutarlos de forma similar a lo que está pidiendo.

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