鍍金池/ 問答/HTML5  HTML/ redux-saga有沒有辦法在異步結(jié)束后通知視圖層?

redux-saga有沒有辦法在異步結(jié)束后通知視圖層?

大概是這樣的:

準(zhǔn)備用react-saga做為異步方案,但是由于是React-Native項(xiàng)目,
在很多請(qǐng)求成功后需要在視圖層組件內(nèi)調(diào)用一些原生接口,
所以需要視圖層能知道什么時(shí)候異步任務(wù)結(jié)束,以及異步的處理結(jié)果。

以前在web端用的 dva 框架, 有一個(gè)特點(diǎn)就是當(dāng)dispatch一個(gè)異步effect的時(shí)候, 會(huì)返回promise對(duì)象,然后在effect中返回處理結(jié)果, 視圖層就可以知道異步拿到的結(jié)果。

現(xiàn)在直接用的redux-saga,有沒有什么方案能實(shí)現(xiàn)這種特性?

回答
編輯回答
只愛你

使用call調(diào)用一個(gè)異步函數(shù),完成后使用 put 再調(diào)用一個(gè)同步函數(shù)修改 state,這樣可以么
其實(shí)不明白你說的是什么.dva 不就是在 saga 基礎(chǔ)上封裝的么

2018年1月10日 05:01
編輯回答
氕氘氚

目前已經(jīng)找到了解決的方案,感謝樓上這位大兄弟 @dablwow80 給的參考,
在這個(gè)基礎(chǔ)上寫了自己的處理,大概是這么個(gè)意思:


// 這個(gè)是我所有頁面的基類, 最終所有頁面都繼承這個(gè)
// 封裝這么一個(gè)方法 _dispatch,代替原本的dispatch

class Page extends React.Component {
    
  _dispatch = (action) => {
    return new Promise((resolve, reject) => {
      this.props.dispatch({
        type: action.type,
        payload: {
          ...action.payload,
          resolve,
          reject,
        },
      })
    })
  }

}

// 然后是具體頁面上, 使用這個(gè)方法

class BootStrap extends Page {
  render() { 
    return ...
  }
  
  componentDidMount() {
    this.isLogin()
  }

  isLogin = async () => {
    await this._dispatch({ type: 'USER_ISLOGIN' })
    console.log('complete')
    SplashScreen.hide() // 視圖層在請(qǐng)求完成后需要執(zhí)行的其他操作
  }

}

// saga 里面,只要在異步完成后執(zhí)行resolve, reject就可以了

function* userIsLogin({ payload }) {
  const { resolve } = payload
  const user = yield call(fetch_user)
  // ... other
  yield fork(resolve, user)
}

這就是最簡(jiǎn)單的一個(gè)栗子, 實(shí)際會(huì)有很多類似的場(chǎng)景, 需要在dispatch發(fā)出后,第一時(shí)間知道異步何時(shí)完成, 然后調(diào)用原生接口,或者其他組件方法, 而不能只依靠redux里傳出來的props數(shù)據(jù)更新

2017年11月25日 10:27