Doğru yolu redux devlet dayalı HTTP çağrıları azaltmasını ve ben gerekenler

Question

tepki: Bir input[type="search"] olduğunu bir controlled component. Daha sonra, bu bileşenin değiştirilmesinin 1 saniyesinden sonra, o aramayı yürütmek için bir HTTP çağrısı göndermek ve sonuçları başka bir bileşende göstermek istiyorum.

bunu yaptık Nasıl: Ben dispatch(setSearch(str)); her aradığında Ben dispatch(displaySearch(false)); için arama yapmak ve bileşende işin bu tür yapıyor yanlış olduğunu o zaman _.throttle Bana hissediyor dispatch(displaySearch(true));

çağrısı ama redux’da redüktörde bunu yapmanın bir yolunu düşünemiyorum.

Answer 1

Bunu çözmek için farklı seçenekleriniz var.

1. Sıçrama bir bileşen seviyesinde

Bu adresinden eylem basit bir yaklaşımdır. Giriş bir değişikliği tetiklediğinde, numaralı çağrıyı, sunucu çağrısını geciktiren setSearch bir geri döndürülen sürümünü çağırır.

import * as React from "react" 
import {connect} from "react-redux" 
import {setSearch} from "./actions" 

export default connect(
    null, 
    function mapDispatchToProps(dispatch) { 
    const setSearch_ = _.debounce(q => dispatch(setSearch(q)), 1000) 
    return() => ({setSearch: setSearch_}) 
    } 
)(
    function SearchForm(props) { 
    const {setSearch} = props 
    return (
     <input type="search" onChange={setSearch} /> 
    ) 
    } 
) 

2. redux-saga

Bu yaklaşım kullanarak Sıçrama fazla klişe gerektirir fakat iş akışı üzerinde çok daha fazla kontrol sağlar. efsanesi'u kullanarak, SET_SEARCH eylemini kesiyoruz, geri döndürüyoruz, API'yi arayınız ve sonuçları içeren yeni bir eylem gönderiniz.

import {call, cancel, fork, put, take} from "redux-saga/effects" 
import {setSearchResults} from "./actions" 
import {api} from "./services" 
import {delay} from "./utils" 

export default function* searchSaga() { 
    yield [ 
    // Start a watcher to handle search workflow 
    fork(watchSearch) 
    ] 
} 

function* watchSearch() { 
    let task 

    // Start a worker listening for `SET_SEARCH` actions. 
    while (true) { 
    // Read the query from the action 
    const {q} = yield take("SET_SEARCH") 

    // If there is any pending search task then cancel it 
    if (task) { 
     yield cancel(task) 
    } 

    // Create a worker to proceed search 
    task = yield fork(handleSearch, q) 
    } 
} 

function* handleSearch(q) { 
    // Debounce by 1s. This will lock the process for one second before 
    // performing its logic. Since the process is blocked, it can be cancelled 
    // by `watchSearch` if there are any other actions. 
    yield call(delay, 1000) 

    // This is basically `api.doSearch(q)`. The call should return a `Promise` 
    // that will resolve the server response. 
    const results = yield call(api.doSearch, q) 

    // Dispatch an action to notify the UI 
    yield put(setSearchResults(results)) 
} 

Answer 2

Ön delay ve takeLatest:

import { all, takeLatest, call } from 'redux-saga/effects'; 
import { delay } from 'redux-saga'; 


function* onSearch(action) { 
    yield call(delay, 1000); // blocks until a new action is 
          // triggered (takeLatest) or until 
          // the delay of 1s is over 

    const results = yield call(myFunction); 
} 

function* searchSagas() { 
    yield all([ 
    // ... 
    takeLatest(ON_SEARCH, onSearch), 
    ]); 
} 

export default [searchSagas];