Question

我正在使用React + Redux应用程序，该应用程序使用第三方SDK连接到Websocket，通过服务进行身份验证以及发送和接收数据。以下是使用SDK可以完成的一些示例：

import SDK from 'third-party';

const client = SDK.init(...);

client.connect();

client.on('auth-challenge', callback => {
    // Retrieve auth token from back-end
});

client.on('ready', () => {
    client.loadData().then(data => {
        // do something with this
    });
});

是否有可能将此数据存储在我的Redux存储中，或者使用Sagas加载身份验证令牌并在数据可用后对SDK采取措施？

我可以想象我可以将商店导入到此文件中，并使用store.dispatch()来请求令牌（通过Saga），但是如何知道该令牌何时加载？我只是需要直接进行API调用吗？

Answer 1

我建议将异步部分作为承诺放入已连接组件之一的componentDidMount方法中，并在收到令牌后调用调度程序。

import { askForToken } from '../my-helpers/sdk-helper;

class SomeParentComponentsContainer extends Component {
  componentDidMount(){
     const { dispatch } = this.props;
     dispatch({ type: 'GET_TOKEN' })
     // async part. Drop it if you use sagas.
     askForToken()
     .then(token => {
        dispatch({ type: 'GET_TOKEN__SUCCESS', payload: { token } })
      })
     // ----
  }

  someMethodWhichNeedsTheToken = () => {
     // this is available in any connected component now from store
     const { sdkToken } = this.props;
     ....
  }

  ...
}

const mapDispatchToProps = state => ({
  sdkToken: state && state.sdkToken
})

export default connect(mapDispatchToProps)(SomeParentComponentsContainer);

第二个选择是，如果您使用sagas，只需将dispatch({ type: 'GET_TOKEN' })的一部分保留在componentDidMount中，然后由佐贺做其余的事情。

sagas.js

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import { askForToken } from '../my-helpers/sdk-helper;

function* fetchToken(action) {
   try {
      const user = yield call(askForToken);
      yield put({type: "GET_TOKEN__SUCCESS", token });
   } catch (e) {
      yield put({type: "GET_TOKEN__FAILS", message: e.message});
   }
}


function* mySaga() {
  yield takeEvery("GET_TOKEN", fetchToken);
}

有关如何设置中间件以使传奇工作见sagas documentation。

在React + Redux上使用第三方SDK

1 个答案: