如何等待動作的派發？

Question

在 redux 中，我有一個（計數，遠程計數），我將兩者默認設置為 0！

主要思想是比較計數是否等於遠程計數我想發送一個鎖定應用程序的動作“真/假”

在主屏幕從 API 獲取遠程計數，然后將其保存在 redux 商店中，保存得很好

但我有一個 if 語句來檢查是否 count == remote count 我鎖定了應用程序

所以這個語句在我保存遠程計數之前調用我猜雖然我將它添加到 then()

主屏幕

  getRemoteCount = async () => {
    try {
      let response = await API.get('/number/subsribtion');
      let remoteCount = response.data.number;
      this.props.saveRemoteCount(remoteCount); // it's saved the remote count! 
    } catch (err) {
      console.log(err);
    }
  };




 componentDidMount() {
    const {remoteCount, count} = this.props;
    this.getRemoteCount().then(() => {
      if (count == remoteCount) {
        console.log('count', count); 
        console.log('remoteCount', remoteCount);//it's log 0!! so the next line invoke!
        this.props.isAppLock(true);
      }
    });
}

Answer 1

使用渲染來獲取更新的計數。 componentDidMount 在組件第一次掛載時運行。 將redux store和mapToState的計數保存在組件中。

class C {
  getRemoteCount = async () => {
    try {
      let response = await API.get("/number/subsribtion");
      let remoteCount = response.data.number;
      this.props.saveRemoteCount(remoteCount); // it's saved the remote count!
    } catch (err) {
      console.log(err);
    }
  };
  componentDidMount() {
    this.getRemoteCount();
  }
  render() {
    const { remoteCount, count } = this.props;
    if (count == remoteCount) {
      console.log("count", count);
      console.log("remoteCount", remoteCount); //it's log 0!! so the next line invoke!
      this.props.isAppLock(true);
    }
  }
}

Answer 2

您可以使用dispatch async function 使用 redux thunk。

1. 安裝 redux thunk。

2. 用作商店內的中間件。

import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

3. 使用它來調度異步操作。

return async dispatch=>{ let res= await authLogin(data)}