React-Redux connect () не обновляет компонент, даже если состояние изменяется без изменения

javascript reactjs redux react-redux immutable.js

531 просмотра

1 ответ

У меня есть этот кодекс , где 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и сделал все состояние массива с редуктором, возвращая каждый раз новый массив. Это все еще не сработало.

Версии:

react-redux@4.4.5
redux@3.5.2
react@15.3.1
Автор: goldbullet Источник Размещён: 08.11.2019 11:25

Ответы (1)


0 плюса

Решение

если вы откроете консоль, будет ошибка

addComponentAsRefTo (...): только ReactOwner может иметь ссылки. Возможно, вы добавляете ссылку на компонент, который не был создан внутри 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 должен быть добавлен на страницу один раз.

после этого вам нужно добавить провайдера из реагировать на редукцию. Также вам нужно добавить ключевые реквизиты в ваших списках.

поменял перо http://codepen.io/anon/pen/dXLQLv?editors=0010

Автор: Kokovin Vladislav Размещён: 20.08.2016 05:31
Вопросы из категории :
32x32