Реагируйте на Redux, не меняя реквизит, когда страница уже загружена - PullRequest
Новая
       45

Реагируйте на Redux, не меняя реквизит, когда страница уже загружена

0 голосов
/ 20 февраля 2019

Мы работаем с простым оверлеем загрузки.Мы берем изменение местоположения в сагах и работаем так: 

export function* handleLocationChange() {
  while (true) { 
    yield take(LOCATION_CHANGE);
    yield put({type: LOADING_PAGE})
  }
}

В наших различных типах раскладок мы останавливаем «состояние загрузчика», отправляя HIDE_LOADING_PAGE, как мы можем видеть: 

class Layout extends React.Component{
  constructor(props){
    super();
    props.hideLoadingBar();
  }  
  (...)
}

const mapDispatchToProps = (dispatch) => ({
  hideLoadingBar: url => dispatch({ type: HIDE_LOADING_PAGE}),
});

Код для LoadingBar следующий: 

class LoadingBar extends React.Component {
  constructor(props){
    super();
    this.state = {loader: false};
  }

  componentDidMount(){
    this.setState({loader: this.props.loader});
  }

  shouldComponentUpdate(nextProps){
    // when already rendered before, props stay unchanged.

  }
}

const mapStateToProps = (state) => ({
  loader: getLoaderState(state), //asks for a 'loader'/'show' key
});

export default connect(mapStateToProps)(LoadingBar);

Редуктор: 

function commonLoaderReducer(state = initialState, { id, index, type, data, error, resultKey }) {

  switch (type) {
    case LOADING_PAGE:
      return state.set("show", true );
    case HIDE_LOADING_PAGE:
      return state.set("show", false );
    default:
      return state;
  }
}

Первый раз, когда мы попробуем это, и мы перейдем отсо страницы А на страницу Б, работает отлично.Страница загрузки отображается и скрывается при изменении состояния избыточности.

Но если мы снова перейдем со страницы B на страницу A, загрузчик не отобразится.В redux я вижу, что оба действия dispatched (LOADING_PAGE and HIDE_LOADING_PAGE), но в shouldUpdateComponents(nextProps) nextProps остаются прежними.Они никогда не меняются так, как должны.

Какие-нибудь подсказки ??

Редактировать: Мы используем неизменяемый для redux's состояние, и LOCATION_CHANGE это react-router-redux's

...