当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。

我希望看到工作解决方案将帮助您解决您的问题。