javascript - 即使状态发生变化而没有突变，React-Redux connect() 也不会更新组件

Question

我有这个codepen ，其中 store.subscribe() 有效，而 connect() 无效。具体来说，该组件不会使用新的 props 进行更新。我怀疑状态突变，因为我认为 connect() 的浅层相等检查可能会忽略更改。但是，我使用 Immutable.js 来更改 reducer 中的状态，并且我还在订阅方法中进行了自己的引用检查，甚至每次更新都略有不同。我觉得这里一定缺少一些明显的东西......

组件:

class App extends React.Component{
  ...
}

const mapStateToProps = state => ({
  alerts: state.alerts
});

const mapDispatchToProps = dispatch => ({
  onAlert: (type, autoHide, message) => 
    dispatch({ type: 'SHOW_ALERT', payload: { message, type, autoHide } })
});

const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);

reducer :

const alertsReducer = (alerts=Immutable.List(), { type, payload }) => {
  switch (type){
    case 'SHOW_ALERT':
      if (!payload.message || R.trim(payload.message).length === 0){          
        throw new Error('Message cannot be empty.');
      }
      return alerts.push(payload);
    default:
      return alerts;
  }
};

商店:

const store = createStore(combineReducers({ alerts: alertsReducer }), applyMiddleware(ReduxThunk.default));

渲染:

//** THIS DOESN'T WORK
// ReactDOM.render(<Provider store={store}><ConnectedApp /></Provider>, document.getElementById('main'));

//** THIS WORKS
store.subscribe(()=>{
  render();
});
const render = () => {
  ReactDOM.render(<App {...store.getState()} onAlert={
        (type, autoHide, message) => store.dispatch({ type: 'SHOW_ALERT', payload: { message, type, autoHide } })
      }/>, document.getElementById('main'));
};
render();

这是因为顶级状态对象仍然具有相同的引用吗？我尝试删除 Immutable.js 并将整个状态设为数组， reducer 每次都会返回一个新数组。但这仍然不起作用。

版本:

react-redux@4.4.5
redux@3.5.2
react@15.3.1

Answer 1

如果打开控制台，就会出现错误

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

要解决这个问题，您应该在 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-with-addons.min.js 之间进行选择和 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js ，因为 React 应该添加到页面一次。

之后你需要从react-redux添加Provider。您还需要在列表中添加关键 Prop 。

换笔 http://codepen.io/anon/pen/dXLQLv?editors=0010