Как можно избежать перемонтирования моего компонента при обновлении приставки? - PullRequest
Новая
       8

Как можно избежать перемонтирования моего компонента при обновлении приставки?

0 голосов
/ 06 января 2019

Я заметил, что при обновлении массива в моем состоянии избыточности состояние компонента connected перемонтируется. В логах после dispatching я вижу ~App & App сразу после. У меня сложилось впечатление, что Reaction / Redux должен обновить компонент. Я просмотрел всю документацию и, исходя из своего понимания, алгоритм реагирования на согласование не должен вести себя так.

Пример кода, демонстрирующего проблему: 

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import {connect} from 'react-redux';


class AppComponent extends React.Component {
  constructor(opts) {
    super(opts);
  }
  componentDidMount() {
    console.log('App');
  }
  componentWillUnmount() {
    console.log('~App');
  }
  shouldComponentUpdate(nextProps) {
    console.log('shouldComponentUpdate');
  }
  render() {
    console.log('render');
    return (
      <span>hello</span>
    );
  }
};

const App = connect(
  (state, props) => {
    console.log('mapping state:', JSON.stringify(state));
    return {
      state
    };
  }
)(AppComponent);


const reducer = (state = [{id: 0, value: 'test0'}, {id: 1, value: 'test1'}], action) => {
  return state.map(o => {
    if (o.id === action.id) {
      return {
        ...o,
        value: action.value
      };
    }
    return o;
  });
};


const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);


setTimeout(() => {
  console.log('dispatching');
  store.dispatch({
    type: 'UPDATE',
    id: 1,
    value: 'test1 updated'
  });
}, 1000);

Как я могу избежать перемонтирования AppComponent? У меня нет этой проблемы, если избыточное состояние не является массивом. Кроме того, в других проектах «Реакция / Избыточность» у меня не было этой проблемы. Те же версии пакета npm. Я думаю, что где-то здесь допустил глупую ошибку, но не понимаю, что сделал неправильно. Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 06 января 2019

Я поместил ваш код в CodeSandbox, он, кажется, работает нормально для меня: 

mapping state: 
[{"id":0,"value":"test0"},{"id":1,"value":"test1"}] 
render 
App cDM 
dispatching 
mapping state: 
[{"id":0,"value":"test0"},{"id":1,"value":"test1 updated"}] 
shouldComponentUpdate 
render

Итак, я думаю, что ваш код на самом деле в порядке. Песочница здесь: https://codesandbox.io/s/k0k8rl8wzr

...