Question

我们正在使用一个简单的加载叠加层。我们在sagas中进行位置更改，并像这样工作：

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

第一次尝试，我们从A页转到B页，它运行良好。随着redux状态的改变，加载页面会显示或隐藏。

但是，如果我们再次从B页转到A页，则不会显示加载程序。我可以在redux中看到两个动作如何都是dispatched (LOADING_PAGE and HIDE_LOADING_PAGE)，但是在shouldUpdateComponents(nextProps)中，nextProps保持不变。他们永远都不会改变，应该改变。

有任何线索吗？？

编辑：我们在redux's状态下使用不可变，而LOCATION_CHANGE是react-router-redux's

页面已加载时，React Redux不会更改道具

0 个答案: