[RN][Redux] Redux Observable

Trong bài viết này tôi sẽ giới thiệu với bạn 1 loại redux mới Redux Observable

Giới thiệu

Redux Observable sử dụng RxJs và các đối tượng observable để tạo ra các tiến trình bất đồng bộ và luồng xử lý dữ liệu cho ứng dụng Redux.

Ứng dụng

Điều đầu tiên chúng ta cần làm để bắt đầu với redux observable là lại update file actions.js như sau:

import { FETCHING_DATA, FETCHING_DATA_SUCCESS, FETCHING_DATA_FAILURE } from './constants'

export function fetchData () {
  return {
    type: FETCHING_DATA
  }
}

export function getDataSuccess (data) {
  return {
    type: FETCHING_DATA_SUCCESS,
    data
  }
}

export function getDataFailure (error) {
  return {
    type: FETCHING_DATA_FAILURE,
    errorMessage: error
  }
}

Như bạn thấy, chúng ta đã update file actions để có được 3 actions như trên. Tiếp theo, chúng ta sẽ tạo một phương thức tên epic. Epic là một phương thức tạo ra luồng chạy của tiến trình và trả về luồng kết quả của các tiến trình đó.

Chúng ta tạo một file tên epic.js với nội dung như bên dưới:

import { FETCHING_DATA } from './constants'
import { getDataSuccess, getDataFailure } from './actions'
import getPeople from './api'

import 'rxjs'
import { Observable } from 'rxjs/Observable'

const fetchUserEpic = action$ =>
  action$.ofType(FETCHING_DATA)
    .mergeMap(action =>
      Observable.fromPromise(getPeople())
        .map(response => getDataSuccess(response))
        .catch(error => Observable.of(getDataFailure(error)))
      )

export default fetchUserEpic

$ là cú pháp convention của RxJS dùng để định danh biến là trả về 1 stream

1. import giá trị FETCHING_DATA.
2. import phương thức getDataSuccess và getDataFailure từ tiến trình.
3. import rxjs và Observable từ rxjs.
4. Chúng ta tạo thêm 1 phương thức tên fetchUserEpic.
5. Chúng ta đợi cho tiến trình FETCHING_DATA tạo ra một luồng xử lý, và khi đó chúng ta gọi phương thức mergeMap của tiến tình, kết quả được trả về trong Observable.fromPromise từ phương thức getPeople và map nó với đối tượng getDataSuccess trong tiến trình của chúng ta.

Cuối cùng, chúng ta chỉ cần update configureStore và sử dụng epic middleware mới.

Nội dung file configureStore.js:

import { createStore, applyMiddleware } from 'redux'
import app from './reducers'

import { createEpicMiddleware } from 'redux-observable'
import fetchUserEpic from './epic'

const epicMiddleware = createEpicMiddleware(fetchUserEpic)

export default function configureStore () {
  const store = createStore(app, applyMiddleware(epicMiddleware))
  return store
}

Kết luận

Và giờ chúng ta có thể chạy app và mọi chức năng đã hoạt động như mong muốn.

Hẹn gặp lại trong bài viết kế tiếp, cũng là bài viết cuối cùng trong seri Redux nhé đó là Redux Promise middleware.