Question

我有codepen，其中store.subscribe()有效且connect()不起作用。具体来说，组件没有使用新道具进行更新。我怀疑状态突变，因为我认为connect（）的浅层等式检查可能忽略了变化。但是，我在减速器中使用Immutable.js进行状态更改，并且我在自己的订阅方法中也进行了自己的ref检查，并且每次更新都会有很小的不同。我觉得这里肯定有一些显而易见的东西......

组件：

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

Answer 1

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

addComponentAsRefTo（...）：只有ReactOwner可以有refs。你可能会将ref添加到未在a中创建的组件组件的render方法，或者您有多个React副本装载

要解决它，你应该在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

React-Redux connect（）即使更改状态而没有突变

1 个答案: