React wird nicht aktualisiert, wenn Redux Zustand unterhalb der ersten Ebene geändert wird

Question

Ich habe meinen Zustand in Redux und bin mit den reagieren-redux Steckern es in meine Reaktion Anwendung zu binden. Während des ersten Hochlaufs, bei dem der Status festgelegt ist, funktioniert die Verbindung sehr gut. Wenn ich jedoch einen Teil des Zustands in meinem Reduzierer aktualisiere, wird er nicht wie von React geändert gelesen, sodass die Komponente nicht erneut dargestellt wird. Wenn ich eine andere Aktion mache, die ein Rendering erzwingt, wurde der Zustand tatsächlich geändert.

Es scheint mit dem Staat nicht zu tun zu haben, ist anerkannt als geändert zu haben, und in der Methode des wrapWithConnect reagieren-redux, die storeChanged und propsChanged auszuwerten sowohl zu falsch nach dem ersten Durchlauf. Ein Hinweis könnte sein, dass react-redux in diesen Prüfungen auf einem flachen Niveau vergleicht.

Die Frage ist "Was muss ich tun, damit React meine Statusänderungen anzeigt, wenn sich der Status in Redux ändert"?

Der relevante Teil des Staates ist unter

let thisOrder = Immutable.fromJS({ 
"projectNumber": '', 
"orderHeader": { 
    "order_id": "", 
    "firstname": "", 
    "lastname": "", 
    "address1": "", 
), 
"orderProducts": [], 
"lastOperation": ''}); 

Der Abschnitt, der ist orderProducts aktualisiert wird, eine Reihe von Produkten, die im Grunde wie

orderProducts:[{productSKU:'Y54345',productDesc:'What it is',price:"4.60",qty:2}, 
{productSKU:'Y54345',productDesc:'What what is',price:"9.00",qty:1}] 

Bei der Aktualisierung Menge oder Preis im Minderer sieht unten (durch eine Aktion aufgerufen) der resultierende neue Zustand hat die Änderungen

case OrderConstants.ORDER_PRODUCT_UPDATE:{ 

let productList = updateProductList(action.updateProduct, state.get(
'orderProducts')) 

let newState = state.update('orderProducts', 
productList).set('lastOperation', action.type); 

    return newState;} 

Und schließlich reagieren die Steuerkomponente, die dann die Requisiten

render: function() { 
     return (
      <div> 
       <ProductList updateOrder={this.updateOrder()} products={this.props.products}/> 

        {this.submitContinueButton()} {this.submitButton()} 
        {this.cancelButton()} 
       </div> 
      </div> 
     ) 
    } 
}); 
// connect to Redux store 
var mapStateToProps = function (state) { 
    return { ocoStore: state.toJS(), 
      products: state.get('orderProducts')}; 
}; 

export default connect(mapStateToProps)(OrderProducts); 

Alle oben genannten Downstream sendet, wird in den entsprechenden Abschnitten getrimmt. Beachten Sie, dass der Code die Produktinformationen auf den unteren Komponenten beim erstmaligen Laden anzeigt. Beim Aktualisieren des Preises oder der Menge tritt die Aktualisierung nicht auf.

Answer 1

Ich habe Ihre Lösung mit JSBIN repliziert und ich schaffte es an die Arbeit so dachte ich, dass ich für den Fall, teilen würde es Ihnen in irgendeiner Weise hilft.

Unten ist der Code wie in JSBIN gesehen. Es basiert auf den Code-Schnipsel in Ihrer Frage. Beachten Sie, dass Sie nicht den Code für Ihre updateProductList Methode und den Code für die ProductList Komponente vorsah, damit ich meine eigenen hatte zu schaffen.

const initialState = Immutable.fromJS({ 
    "projectNumber": '', 
    "orderHeader": { 
    "order_id": "", 
    "firstname": "", 
    "lastname": "", 
    "address1": "", 
    }, 
    "orderProducts": [ 
    { 
     productSKU: 'Y54345', 
     productDesc: 'What it is', 
     price: "4.60", 
     qty:2 
    }, 
    { 
     productSKU: 'Y54346', 
     productDesc: 'What what is', 
     price:"9.00", 
     qty:1 
    } 
    ], 
    "lastOperation": '' 
}); 


const updateProductList = (updateProduct, productList) => { 
    return productList.map(product => { 
    if (product.get('productSKU') === updateProduct.productSKU) { 
     return Immutable.fromJS(updateProduct); 
    } 
    return product; 
    }); 
}; 

const order = (state = initialState, action) => { 
    switch (action.type) { 
    case 'ORDER_PRODUCT_UPDATE': 
     let updatedProductList = updateProductList(action.updateProduct,state.get('orderProducts')); 

     const newState = state.set('orderProducts', updatedProductList).set('lastOperation', action.type); 

     return newState; 
    default: 
     return state; 
    } 
}; 

const { combineReducers } = Redux; 
const orderApp = combineReducers({ order }); 

const { Component } = React; 
const { Provider, connect } = ReactRedux; 

const ProductList = ({ 
    products 
}) => { 
    return (<ul> 
      {products.map(product => { 
      return (
      <li key={product.get('productSKU')}> 
       {product.get('productSKU')} - {product.get('productDesc')} - {product.get('qty')} 
      </li> 
      ); 
      } 
     )} 
     </ul>); 
}; 

const OrderProducts = ({ 
    ocoStore, 
    products, 
    dispatch 
}) => (
       <div> 
       <ProductList products={products} /> 
       <a href='#' 
        onClick={e => { 
        e.preventDefault(); 
        dispatch({ 
         type: 'ORDER_PRODUCT_UPDATE', 
         updateProduct: { 
         productSKU: 'Y54345', 
         productDesc: 'What it is', 
         price: "4.60", 
         qty: 8 
         } 
        }); 
       }}>Update Product Y54345</a> 
      </div> 
) 

const mapStateToProps = (state) => { 
    return { 
     ocoStore: state.order.toJS(), 
     products: state.order.get('orderProducts') 
    }; 
}; 

const OrderApp = connect(mapStateToProps)(OrderProducts); 

const { createStore } = Redux; 

ReactDOM.render(
    <Provider store={createStore(orderApp)}> 
    <OrderApp /> 
    </Provider>, 
    document.getElementById('root') 
); 

JSBIN: http://jsbin.com/qabezuzare

Der Teil in meinem Code, der sich unterscheidet, ist die folgende:

const newState = state.set('orderProducts', updatedProductList).set('lastOperation', action.type); 

Dies liegt daran, meine update Methode eine neue Immutable.List zurückgibt.

Ich hoffe Blick auf die Arbeitslösung werden Sie Ihr Problem helfen zu beheben.