Redux Sagaを使用してX秒ごとにアクションを送信

Question

redux-sagaに全く新しいので、私はアクションLANGUAGE_START_CYCLEに反応し、アクションLANGUAGE_CYCLEを3秒ごとに循環させるサガを設定しようとしています。

しかし、私がLANGUAGE_START_CYCLEをReduxストアにディスパッチすると、サガLANGUAGE_CYCLEは決して実行されません。

私が間違っていることは何ですか？私は他のサガがうまく動いているので、それは単純な間違いであると思われる。作業している私の他のサガの一つの

// 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を派遣 - どうやらこれは佐賀ミドルウェアに通知していなかったし、私のチャンネルが更新されなかった。

しかし、簡単なボタンを使用している場合私のコンポーネントの1つ：

<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

私はウェイト機能が誤ったタイプだと思います。 このように修正する必要があります。