Использование стороннего SDK с React + Redux - PullRequest
Новая
       20

Использование стороннего SDK с React + Redux

0 голосов
/ 13 июня 2019

Я работаю с приложением React + Redux, которое использует сторонний SDK для подключения к веб-сокету, аутентификации в службе и отправки и получения данных. Вот несколько примеров того, что можно сделать с помощью 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?

1 Ответ

1 голос
/ 13 июня 2019

Я предлагаю поместить асинхронную часть как обещание в метод 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, а saga сделает все остальное.

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 о том, как настроить промежуточное ПО для работы саги.

...