当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}]

当更新下面的reducer中的qty或price(由动作调用)时,结果newState 具有更改

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

最后,控制React组件然后向下游发送道具

    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。

我希望查看工作解决方案能够帮助您解决问题。