title: Redux saga & redux toolkit
body: <p>I been trying to introduce redux sagas and redux tool kit to my project. The problem I am having at the moment is that the watcher saga is not catching on the dispatched action in the <code>takeEvery</code> effect and running the handler. I can't see anything wrong with the code. Can anyone Help!!!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { configureStore, getDefaultMiddleware  } from '@reduxjs/toolkit'
  import createSagaMiddleware from 'redux-saga'
  import logger from 'redux-logger';
  
  import createReducer from './rootReducer';
  import sagas from './rootSaga';
  
  
  const configureAdminStore = (initialState = {}) =&gt; {
      const sagaMiddleware = createSagaMiddleware();
    
      // sagaMiddleware: Makes redux-sagas work
      const middlewares = [sagaMiddleware, logger];
  
    
      const store = configureStore({
        reducer: createReducer(),
        middleware: [...getDefaultMiddleware({thunk: false}), ...middlewares],
        preloadedState: initialState,
        devTools: process.env.NODE_ENV !== 'production',
      });
      
      sagaMiddleware.run(sagas);
    
      return store;
    }
  
    export default configureAdminStore;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {put, take, takeEvery, call} from 'redux-saga/effects'
  import {getAll} from './environmentSlice'
  import {confApi} from '../../service/conf-api'
  import { getData } from '../../lib/conf-api-response';
  
  
  function* getAllEnvironments() {
      const response = yield call(confApi.admin.getEnvironments());
      const {environments} = yield call(getData(response));
      yield put(getAll(environments));
  }
  
  // eslint-disable-next-line import/prefer-default-export
  export function* watchGetAllEnvironments() {
       yield takeEvery(getAll().type, getAllEnvironments);
  }</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { createSlice } from '@reduxjs/toolkit'
  
  const environmentSlice = createSlice({
      name: 'environments',
      initialState: [],
      reducers: {
          getAll: (state, action) =&gt; {
              state = action.payload
          },
      },
    })
  
    export const {getAll} = environmentSlice.actions
  
    export const { getAllSuccess } = environmentSlice.actions;
    
    export default environmentSlice.reducer
  
    export const environmentSelector = (state) =&gt; state.environments</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {all} from 'redux-saga/effects'
  import {watchGetAllEnvironments} from './environments/environmentSaga'
  
  export default function* rootSaga() {
      yield all([
          watchGetAllEnvironments(),
      ])
    }</code></pre>
  </div>
  </div>
  </p>