如何使用 redux 获取更新的状态

Question

I have a react project and redux for state management. These are my actions.

const mapDispatchToProps = dispatch => ({
  handleChange: (name, value) => { dispatch(handleChange(name, value)) },
  filterRooms: (rooms) => { dispatch(filterRooms(rooms)) }
});

I have to use these 2 method one by one.

this.props.handleChange(pets, true);  // handle changes
this.filterRooms();   // filtering with changing value

filterRooms = () => {
  let {rooms,pets} = this.props; // Here I should get pets === true but it's false.

  // filter by pets
  if (pets) {
    tempRooms = tempRooms.filter(room => room.pets === true);
  }

  this.props.filterRooms(tempRooms);
}

If I use setTimeout for second method thats ok but I think that's not a correct way.

this.props.handleChange(name, value);
setTimeout(() => {
   this.filterRooms();
}, 500);

Answer 1

Seems that below two function run in sequence, one after another

this.props.handleChange(pets, true);  // handle changes
this.filterRooms();   // filtering with changing value

First dispatch changed value to Redux. And it is updated there (as sample with setTimeout works). But don't expect updated value from Redux will be immediately available to this.filterRooms() .

You have some Reactjs component. Reactjs component is essentially class or function. Then you wrap in in connect . So your code may look like this

class Component1 extends React.Component {
    onChange: () => {
        this.props.handleChange(pets, true);  // handle changes
        this.filterRooms();   // filtering with changing value
    }
    // other staff
}

export default connect(mapStateToProps, mapDispatchToProps)(Component1)

Whats happens in React. It instantiate class Component1 , then calls connect which in turn calls some methods of your class (ie render() or something else). connect also pass some values from Redux store to your component as props. Method of Component1 is executed and may change Redux state (as it do in your sample). But updated props will not be immediately available. props are just arguments, that have been passed by connect function. To change arguments of any function, you should call it once again. So after receiving updated pets , connect will call your component again with updated pets . But it will be later.

connect() -> calls Component1 and passes props.pets = false -> Compoentn1 sets pets in Redux to true -> connect() receives updated pets and calls Component1 with props.pets = true

That's why trick with setTimeout works. Ste timeout just await for second call of Component1

To solve your exact issue, don't read pets from props if you know that you've updated it.

this.props.handleChange(pets, true);  // handle changes
this.filterRooms(true);   // filtering with changing value

filterRooms = (pets) => {
  let {rooms} = this.props; 

  // filter by pets
  if (pets) {
    tempRooms = tempRooms.filter(room => room.pets === true);
  }

  this.props.filterRooms(tempRooms);
}