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

Question

我的状态位于 Redux 中，并使用 React-Redux 连接器将其绑定(bind)到我的 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 中的数量或价格时(由操作调用)，生成的 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 中的代码。它基于您问题中的代码片段。请注意，您没有提供 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。

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