Redux-Saga爲單個動作運行兩次

Question

我有一個傳奇來處理請求。用戶點擊一個按鈕來切換照片的喜歡狀態。

傳奇傾聽SUBMIT_LIKE類型的動作。我的問題是submitLikeSaga每次運行SUBMIT_LIKE都會運行兩次。 例如在api錯誤情況下，一個SUBMIT_LIKE操作會觸發兩個API調用和四個RECEIVE_LIKE操作。

（使用react-boilerplate是否有幫助。）

export function* submitLikeSaga(action) { 

    // optimistically update the UI 
    // action shape: { 
    // type: RECEIVE_LIKE, 
    // like: {id: 1, liked: true} 
    // } 
    yield put(receiveLike(action.like)); 

    // POST like data to api 
    const response = yield call(
    request, 
    `${API_ENDPOINT}/user_likes.json`, 
    { 
     method: 'POST', 
     headers: { 
     Authorization: `Bearer ${action.token}`, 
     Accept: 'application/json', 
     'Content-Type': 'application/json', 
     }, 
     body: JSON.stringify(action.like), 
    } 
); 

    // if api call failed, reverse change made to UI 
    if (response.err) { 
    yield put(receiveLike({ 
     id: action.like.id, 
     liked: !action.like.liked, 
    })); 
    } 
} 

export function* watchSubmitLike() { 
    yield* takeEvery(SUBMIT_LIKE, submitLikeSaga); 
} 

// All sagas to be loaded 
export default [ 
    watchFetchUsers, 
    watchSubmitLike, 
]; 

編輯：加入中間件和視圖代碼。

ProfileGrid.js

const ProfileGrid = ({ 
    users, 
    submitLike, 
    token, 
}) => 
    <div className={styles.profileGrid}> 
    {users.map((user, i) => (
     <div key={i} className={styles.gridTile}> 
     <GridTile 
      title={user.username} 
      actionIcon={<ActionIcon 
      onIconClick={() => { submitLike(user.id, !user.liked, token); }} 

      isActive={user.liked} 
      activeColor="yellow" 
      defaultColor="white" 
      />} 
     > 
      <img style={{ width: '100%', height: 'auto' }} src={user.avatar} alt="profile" /> 
     </GridTile> 
     </div> 
    ))} 
    </div>; 

ActionIcon.js

const ActionIcon = ({ 

    onIconClick, 
    isActive, 
    activeColor, 
    defaultColor, 
}) => 
    <IconButton onClick={onIconClick} > 
    <StarBorder 
     color={isActive ? activeColor : defaultColor} 
    /> 
    </IconButton>; 

store.js

/** 
* Create the store with asynchronously loaded reducers 
*/ 

import { createStore, applyMiddleware, compose } from 'redux'; 
import { fromJS } from 'immutable'; 
import { routerMiddleware } from 'react-router-redux'; 
import createSagaMiddleware from 'redux-saga'; 
import createReducer from './reducers'; 

const sagaMiddleware = createSagaMiddleware(); 
const devtools = window.devToolsExtension || (() => (noop) => noop); 

export default function configureStore(initialState = {}, history) { 
    // Create the store with two middlewares 
    // 1. sagaMiddleware: Makes redux-sagas work 
    // 2. routerMiddleware: Syncs the location/URL path to the state 
    const middlewares = [ 
    sagaMiddleware, 
    routerMiddleware(history), 
    ]; 

    const enhancers = [ 
    applyMiddleware(...middlewares), 
    devtools(), 
    ]; 

    const store = createStore(
    createReducer(), 
    fromJS(initialState), 
    compose(...enhancers) 
); 

    // Extensions 
    store.runSaga = sagaMiddleware.run; 
    store.asyncReducers = {}; // Async reducer registry 

    // Make reducers hot reloadable, see http://mxs.is/googmo 
    /* istanbul ignore next */ 
    if (module.hot) { 
    module.hot.accept('./reducers',() => { 
     System.import('./reducers').then((reducerModule) => { 
     const createReducers = reducerModule.default; 
     const nextReducers = createReducers(store.asyncReducers); 

     store.replaceReducer(nextReducers); 
     }); 
    }); 
    } 

    return store; 
} 

asyncInjectors.js

import { conformsTo, isEmpty, isFunction, isObject, isString } from 'lodash'; 
import invariant from 'invariant'; 
import warning from 'warning'; 
import createReducer from '../reducers'; 

/** 
* Validate the shape of redux store 
*/ 
export function checkStore(store) { 
    const shape = { 
    dispatch: isFunction, 
    subscribe: isFunction, 
    getState: isFunction, 
    replaceReducer: isFunction, 
    runSaga: isFunction, 
    asyncReducers: isObject, 
    }; 
    invariant(
    conformsTo(store, shape), 
    '(app/utils...) asyncInjectors: Expected a valid redux store' 
); 
} 

/** 
* Inject an asynchronously loaded reducer 
*/ 
export function injectAsyncReducer(store, isValid) { 
    return function injectReducer(name, asyncReducer) { 
    if (!isValid) checkStore(store); 

    invariant(
     isString(name) && !isEmpty(name) && isFunction(asyncReducer), 
     '(app/utils...) injectAsyncReducer: Expected `asyncReducer` to be a reducer function' 
    ); 

    store.asyncReducers[name] = asyncReducer; // eslint-disable-line no-param-reassign 
    store.replaceReducer(createReducer(store.asyncReducers)); 
    }; 
} 

/** 
* Inject an asynchronously loaded saga 
*/ 
export function injectAsyncSagas(store, isValid) { 
    return function injectSagas(sagas) { 
    if (!isValid) checkStore(store); 

    invariant(
     Array.isArray(sagas), 
     '(app/utils...) injectAsyncSagas: Expected `sagas` to be an array of generator functions' 
    ); 

    warning(
     !isEmpty(sagas), 
     '(app/utils...) injectAsyncSagas: Received an empty `sagas` array' 
    ); 

    sagas.map(store.runSaga); 
    }; 
} 

/** 
* Helper for creating injectors 
*/ 
export function getAsyncInjectors(store) { 
    checkStore(store); 

    return { 
    injectReducer: injectAsyncReducer(store, true), 
    injectSagas: injectAsyncSagas(store, true), 
    }; 
} 

Answer 1

嗨，你的應用程序將工作正常，如果你做以下

收益* takeEvery（SUBMIT_LIKE，submitLikeSaga）;應該是

yield takeEvery（SUBMIT_LIKE，submitLikeSaga）;

應使用產量*只有當你正在測序傳奇

Answer 2

根據文檔：https://redux-saga.js.org/docs/api/index.html#takelatestpattern-saga-args這將花費您最新的電話，並且將火只有一個動作

import { fork, takeLatest } from 'redux-saga/effects'; 

export function* watchSubmitLike() { 
    yield fork(takeLatest, SUBMIT_LIKE, submitLikeSaga); 

}