Redux saga & redux toolkit

Question

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(),
    ])
  }

Answer 1

If you're interested in creating sagas that can resolve/reject async thunk actions then have a look at the saga-toolkit package - I created and use.

slice.js

import { createSlice } from '@reduxjs/toolkit'
import { createSagaAction  } from 'saga-toolkit'

const name = 'example'

const initialState = {
  result: null,
  loading: false,
  error: null,
}

export const fetchThings = createSagaAction(`${name}/fetchThings`)
export const doSomeMoreAsyncStuff = createSagaAction(`${name}/doSomeMoreAsyncStuff`)

const slice = createSlice({
  name,
  initialState,
  extraReducers: {
    [fetchThings.pending]: () => ({
      loading: true,
    }),
    [fetchThings.fulfilled]: ({ payload }) => ({
      result: payload,
      loading: false,
    }),
    [fetchThings.rejected]: ({ error }) => ({
      error,
      loading: false,
    }),
  },
})

export default slice.reducer

sagas.js

import { call } from 'redux-saga/effects'
import { takeLatestAsync, takeEveryAsync, putAsync } from 'saga-toolkit'
import API from 'hyper-super-api'
import * as actions from './slice'

function* fetchThings() {
  const result = yield call(() => API.get('/things'))

  const anotherResult = yield putAsync(actions.doSomeMoreAsyncStuff()) // waits for doSomeMoreAsyncStuff to finish !

  return result
}

function* doSomeMoreAsyncStuff() {
  ...
  return 'a value for another result'
}

export default [
  takeLatestAsync(actions.fetchThings.pending, fetchThings), // takeLatestAsync: behaves a bit like debounce
  takeEveryAsync(actions.doSomeMoreAsyncStuff.pending, doSomeMoreAsyncStuff), // each action will start a new saga thread
]