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更新数量或价格时（由操作调用），结果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。

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

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

1 个答案: