React-Redux connect()即使在没有突变的情况下更改状态也不会更新组件

React-Redux connect() not updating component even when the state is changed without mutation

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

组件:

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

减速器:

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

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

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。您还需要在列表中添加关键道具。

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