为什么没有超时就无法访问componentDidMount中更新的redux数据？

Question

I am setting redux state in my componentDidMount function and then trying to access immediately and am not able to. I've stripped out some unnecessary complexity, but here's the basic setup:

// URL page?id=1

componentDidMount() {
  this.props.setFilter({ location: this.props.location.search.id) });
  console.log('in mount', this.props.filter);
}

// Action

export function setFilter(filterData) {
  return {
    type: SET_FILTERS,
    payload: filterData
  };
}

// Reducer 

export default function(state = INITIAL_STATE, action = {}) {
  switch(action.type) {
  case SET_FILTERS: {
    const newState = { ...state, filter: action.payload };
    console.log('reducer state', newState);
    return newState;
  }
  ...
}

This will output

reducer state { location: 1 }
in mount {}

but if I change the componentDidMount to

componentDidMount() {
  this.props.setFilter({ location: 1 });
  setTimeout(() => { console.log(this.props.filter), 0; });
}

it works as expected and outputs

reducer state { location: 1 }
in mount { location: 1 }

Why would this be?

Thanks!

Answer 1

this.props is not updated directly by setFilter .

The action dispatched to the store triggers mapStateToProps to re-run, collect the new value, and merge it into the component props.

console.log('in mount', this.props.filter); runs before this cycle is complete.

setTimeout(() => { console.log(this.props.filter), 0; }); runs after this cycle is complete.

try this..

componentDidMount() {
  const propsCopy = this.props;
  this.props.setFilter({ location: 1 });
  console.log("before", this.props === propsCopy);
  setTimeout(() => { console.log("after", this.props === propsCopy) }, 0);
}

you'll get before true & after false .

so although the dispatch is synchronous, the props objects before and after the setTimout are different, and it's only the new props that have the filter set.