Redux saga & redux toolkit

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 takeEvery effect and running the handler. I can't see anything wrong with the code. Can anyone Help!!!

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 = {}) => {
    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;

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);
}

import { createSlice } from '@reduxjs/toolkit'

const environmentSlice = createSlice({
    name: 'environments',
    initialState: [],
    reducers: {
        getAll: (state, action) => {
            state = action.payload
        },
    },
  })

  export const {getAll} = environmentSlice.actions

  export const { getAllSuccess } = environmentSlice.actions;
  
  export default environmentSlice.reducer

  export const environmentSelector = (state) => state.environments

import {all} from 'redux-saga/effects'
import {watchGetAllEnvironments} from './environments/environmentSaga'

export default function* rootSaga() {
    yield all([
        watchGetAllEnvironments(),
    ])
  }

Solution

It looks like you are just taking getAll().type twice - once in watchGetAllEnvironments and once in getAllEnvironments.

Which means that watchGetAllEnvironments will execute getAllEnvironments, but that will immediately pause and wait for another getAll action to be dispatched, which probably never happens.

So you probably want to remove that first take in getAllEnvironments.

Also, you can just take(getAll), there's not need to take(getAll().type).