當Redux狀態改變到低於第一級時，React未更新

Question

我在Redux中擁有自己的狀態，並且正在使用react-redux連接器將其綁定到我的React應用程序中。在設置狀態的初始運行期間，連接工作良好。然而，當我在reducer中更新狀態的一部分時，它不會被React讀取，所以組件不會再次渲染。當我做一些強制渲染的其他行爲時，國家實際上已經改變了。

這似乎具有與狀態不是識別爲已經改變，並且，在反應-終極版的方法wrapWithConnect做，則storeChanged和propsChanged都評估爲假通過初始運行之後。一個線索可能是那些反應，在這些檢查比較淺層次。

問題是「當Redux中的狀態變化時，我需要做些什麼才能讓React顯示我的狀態變化」？

的狀態的相關部分低於

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

即得到更新是orderProducts，產品的數組基本上看起來像

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

當在減速器更新數量或價格的部分下面（通過動作調用）由此產生的新狀態已更改

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

最後，控制陣營組件然後發送被修整至相關部分下游

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

上述所有的道具。請注意，代碼用於在初始加載時在較低組件上顯示產品信息。這是更新價格或數量刷新沒有發生。

Answer 1

我已經使用JSBIN複製了您的解決方案，並且設法讓它工作，所以我認爲我會分享以防萬一。

下面是在JSBIN中看到的代碼。它基於你的問題中的代碼片段。請注意，您沒有提供updateProductList方法的代碼和ProductList組件的代碼，所以我必須創建自己的代碼。

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

在我的代碼，不同的部分是：

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

這是因爲我的updateProductList方法返回一個新Immutable.List。

我希望看到工作解決方案將幫助您解決您的問題。