Redux Saga를 사용하여 X 초마다 Dispatch 액션을 수행

Question

redux-saga에 완전히 새로운 것으로, 액션 LANGUAGE_START_CYCLE에 반응하여 매 3 초마다 동작 LANGUAGE_CYCLE을 반복합니다.

그러나은 절대로 LANGUAGE_START_CYCLE을 Redux 저장소로 보내면 예상대로 실행되지 않습니다.

내가 뭘 잘못하고 있는지 알기! 내 다른 무용담들이 잘 돌아가고있는 것처럼 단순한 실수라고 의심 될 것이다. 작업하는 내 다른 무용담 중 하나의

// constants/ActionTypes.js 
export const LANGUAGE_SET_ACTIVE = "LANGUAGE_SET_ACTIVE"; 
export const LANGUAGE_START_CYCLE = "LANGUAGE_START_CYCLE"; 
export const LANGUAGE_STOP_CYCLE = "LANGUAGE_STOP_CYCLE"; 
export const LANGUAGE_CYCLE = "LANGUAGE_CYCLE"; 


// actions/language.js 
export const cycleLanguage =() => { 
    return { 
     type: ActionTypes.LANGUAGE_CYCLE 
    } 
};  

// languageSaga.js 
import { actionChannel, call, take, put, race } from 'redux-saga/effects' 
import * as ActionTypes from '../constants/ActionTypes'; 
import * as actions from '../actions/language'; 

const wait = ms => { 
    new Promise(resolve => { 
     setTimeout(() => resolve(), ms) 
    }) 
}; 

export default function * languageSaga() { 
    const channel = yield actionChannel(ActionTypes.LANGUAGE_START_CYCLE); 
    while (yield take(channel)) { 
     while (true) { 
      const { stopped } = yield race({ 
       wait: call(wait, 3000), 
       stopped: take(ActionTypes.LANGUAGE_STOP_CYCLE) 
      }); 

      if (!stopped) { 
       yield put(actions.cycleLanguage()); 
      } else { 
       break; 
      } 
     } 
    } 
} 


// sagas.js (root sagas) 
export default function * sagas() { 
    yield [ 
     directorySaga(), // Another saga which works fine 
     pusherSaga(), // Another saga which works fine 
     languageSaga() 
    ] 
} 

예 :

// directorySaga.js 
function * fetchDirectory(action) { 
    try { 
     const directory = yield call(Api.fetchDirectory, action.id); 
     yield put(fetchDirectorySucceeded(directory)); 
    } catch (e) { 
     yield put(fetchDirectoryFailed(e.message)); 
    } 
} 

export default function * directorySaga() { 
    yield * takeLatest(ActionTypes.DIRECTORY_REQUESTED, fetchDirectory); 
} 

Answer 1

나는 여기에 내 질문에 대답하기 위하여려고하고있다.

위의 코드는 작동하지만 작업을 트리거 할 때 Redux Dev Tools을 사용하여 저장소에 작업을 디스패치했습니다. 간단한 버튼을 사용하는 경우

을하지만 :하지만 분명히 이것은 사가 미들웨어를 통지하지 않았고 내 채널이 업데이트되지 않았다 -

내가 수동으로 상태를 변경 도구를 사용하여 LANGUAGE_START_CYCLE을 파견 내 구성 요소 중 하나 :

<button onClick={() => dispatch(actions.startCycle())}> 
    Start 
</button> 
<button onClick={() => dispatch(actions.stopCycle())}> 
    Stop 
</button> 

사가 미들웨어가 통보되었습니다.

UPDATE

내 매장 구성은 다음과 같습니다

import { createStore, applyMiddleware, compose } from 'redux' 
import createSagaMiddleware from 'redux-saga'; 
import rootReducer from '../reducers/index'; 
import sagas from '../sagas/index'; 

export default function configureStore(initialState) { 
    const sagaMiddleware = createSagaMiddleware(); 
    const store = createStore(rootReducer, initialState, compose(
    applyMiddleware(sagaMiddleware), 
    window.devToolsExtension ? window.devToolsExtension() : f => f 
)); 

    if (module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('../reducers',() => { 
     const nextReducer = require('../reducers'); 
     store.replaceReducer(nextReducer); 
    }); 
    } 

    sagaMiddleware.run(sagas); 

    return store; 
} 

Answer 2

나는 대기 함수가 잘못된 유형 생각합니다. 이렇게 수정해야합니다.