Reactjs Redux Observable



  • Giới thiệu về Redux Observable

    Để có thể quản lý state và props trong ứng dụng react js của bạn thì mô hình Redux cung cấp một giải pháp quản lý bao gồm action, reducerstore .
    Trong đó Redux- Observable là một tùy chọn trung gian cho phép bạn xử lý logic không đồng bộ .
    Khi sử dụng Redux- Observable trong ứng dụng của bạn. Bạn cần phải cung cấp một function Observable input và Observable output . Chức năng này đươc gọi là Epic .

    Redux Observable

    Epics

    Để hiểu rõ hơn về redux- observable tôi sẽ trình bày một ví dụ

    # epics/user_epic.js
    import 'rxjs';
    import {Observable} from 'rxjs';
    
    const FETCH_USER = 'FETCH_USER';
    const FETCH_USER_FULFILLED = 'FETCH_USER_FULFILLED';
    const FETCH_USER_REJECTED = 'FETCH_USER_REJECTED';
    const FETCH_USER_CANCELLED = 'FETCH_USER_CANCELLED';
    
    const fetchUser = id => ({ type: FETCH_USER, payload: id });
    
    const fetchUserFulfilled = item => ({ type: "ADD_ITEM", item });
    
    const cancelFetchUser = () => ({ type: FETCH_USER_CANCELLED });
    
    const fakeAjax = url =>
      Observable.of({
        item: url.substring(url.lastIndexOf('/') + 1)
      }).delay(1000);
      
    const fetchUserEpic = action$ =>
      action$.ofType(FETCH_USER)
        .mergeMap(action =>
          fakeAjax(`/api/users/${action.payload}`)
            .map(response => fetchUserFulfilled(response.item))
            .takeUntil(action$.ofType(FETCH_USER_CANCELLED))
        );
    
    export default fetchUserEpic
    
    

    Ở đây chúng ta lắng nghe action có type là : "FETCH_USER" . Nếu có action này thì sẽ lấy dữ liệu user từ hàm fakeAjax và trả dữ liệu vào fetchUserFulfilled với type : "ADD_ITEM" .

    Reducer

    # reducer/user_reducer
    ....
    
    var dataReducer = (state = { }, action) => {
      switch (action.type){
        case "ADD_ITEM":
          return [...state, action.item]
        case "REMOVE_ITEM":
          ....
        default:
          ....
      }
    }
    
    var reducer = combineReducers({ 
      user: dataReducer
    })
    
    export default reducer ;
    
    

    Tạo reducer xử lý action có type: "ADD_ITEM" . Thêm giá trị của action.tiem vào state.

    Store

    import reducer from './reducer/user_reducer';
    import {createEpicMiddleware} from 'redux-observable';
    import rootEpic from './epics/user_epic';
    import { createStore } from 'redux';
    import {applyMiddleware} from 'redux';
    
    var epicMiddleware = createEpicMiddleware(rootEpic);
    var store = createStore(reducer, applyMiddleware(epicMiddleware));
    
    export default store;
    
    

    Component . bắt sự kiện onsubmit

    import React, { Component } from 'react';
    import {connect} from 'react-redux';
    
    class Noteform extends React.Component {
    
      add_note(e){
        e.preventDefault();
        var {dispatch} = this.props;
        dispatch({type: "FETCH_USER", payload: this.refs.txt.value });
      }
    
      render(){
        return (
          <form onSubmit = {this.add_note.bind(this)} >
            <input type = "text" placeholder = "Add note" ref= "txt" />
            <br/>
            <button>Add</button>
          </form>
        )
      }
    
    }
    
    export default connect(function(state){
      return { data: state.data }
    })(Noteform)
    
    

    Tài liệu

    https://redux-observable.js.org/docs/recipes/Cancellation.html

    https://jsbin.com/fivaca/8/edit?html,css,js,output

    Thank you for reading !!
    Nguồn: Viblo


Hãy đăng nhập để trả lời
 

Có vẻ như bạn đã mất kết nối tới LaptrinhX, vui lòng đợi một lúc để chúng tôi thử kết nối lại.