当 Redux 状态更改为低于第一级时，React 不会更新

Question

我在 Redux 中有我的状态，并且正在使用 react-redux 连接器将其绑定到我的 React 应用程序中。在设置状态的初始运行期间，连接运行良好。但是，当我在 reducer 中更新状态的一部分时，它不会被 React 读取为已更改，因此组件不会再次呈现。当我执行其他一些强制渲染的操作时，状态实际上已经改变了。

这似乎与没有被识别改变的状态有关，并且在 react-redux 的 wrapWithConnect 方法中，storeChanged 和 propsChanged 在初始运行后都评估为 false。一个线索可能是 react-redux 在这些检查中比较浅。

问题是“当 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 组件，然后将 props 发送到下游

    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 中的代码。它基于您问题中的代码 sn-ps 。请注意，您没有提供 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。

我希望查看有效的解决方案可以帮助您解决问题。