title: Redux-Saga & Redux-Toolkit Wiring
body: <p>I have been trying to introduce redux-sagas and redux-toolkit to my project. It seems that I am having some wiring problems. Not sure how to fix it. Let me know if you have any ideas. Here is the error I am getting. Here is the link to <a href="https://github.com/forza11879/twitter-app/tree/master/twitter-app" rel="nofollow noreferrer">github</a></p>
  <p><a href="https://i.stack.imgur.com/3f716.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3f716.png" alt="enter image description here" /></a></p>
  <p>file - <strong>configureAppStore.js</strong></p>
  <pre><code>import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
  import reducer from './reducer';
  import createSagaMiddleware from 'redux-saga';
  import tweetSagas from '../saga/tweet.js';
  
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];
  const middleware = [...getDefaultMiddleware({ thunk: false }), ...middlewares];
  
  const configureAppStore = () =&gt; {
    // reduxjs/toolkit configureStore enables to dispatch async actions
    return configureStore({
      reducer: reducer,
      middleware: middleware,
    });
  };
  
  sagaMiddleware.run(tweetSagas);
  
  export default configureAppStore;
  </code></pre>
  <p>file - <strong>saga/tweet.js</strong></p>
  <pre><code>import { takeEvery, call, put, fork } from 'redux-saga/effects';
  import axios from 'axios';
  import * as actions from '../store/action/saga.js';
  const port = process.env.REACT_APP_PORT;
  const hostname = process.env.REACT_APP_LOCALHOST;
  const baseURL = `http://${hostname}:${port}`;
  
  function api({ dispatch }) {
    return function (next) {
      return function* (action) {
        if (action.type !== actions.sagaApiCallBegan.type) return next(action);
        next(action); // 'sagaApiCallBegan' to show in redux dev tools
        const { url, method, onSuccess, onError } = action.payload;
        try {
          const response = yield call(
            async () =&gt;
              await axios.request({
                baseURL: baseURL,
                url,
                method,
              })
          );
          if (onSuccess)
            yield put(dispatch({ type: onSuccess, payload: response.data }));
        } catch (error) {
          if (onError) yield put(dispatch({ type: onError, payload: error }));
        }
      };
    };
  }
  
  function* watchApi() {
    yield takeEvery(actions.sagaApiCallBegan.type, api);
  }
  
  const tweetSagas = [fork(watchApi)];
  
  export default tweetSagas;
  </code></pre>
  <p>file - <strong>store/tweets.js</strong></p>
  <pre><code>import { createSlice } from '@reduxjs/toolkit';
  import {
    sagaApiCallBegan,
    sagaApiCallSuccess,
    sagaApiCallFailed,
  } from './action/saga';
  import { webSocketCallBegan, webSocketCallFailed } from './action/websocket.js';
  import { normalize } from 'normalizr';
  import { tweetSchema } from '../store/Schema/tweet.js';
  
  const initialState = () =&gt; ({
    byTweetId: {},
    byUserId: {},
    allTweetIds: [],
  });
  
  // action, actionTypes and reducer
  const slice = createSlice({
    name: 'tweets',
    initialState: initialState(),
    // reducers
    reducers: {
      tweetAdded: (state, action) =&gt; {
        const { entities, result } = normalize(action.payload, tweetSchema);
        Object.assign(state.byTweetId, entities.byTweetId);
        Object.assign(state.byUserId, entities.byUserId);
        state.allTweetIds.push(result);
      },
      tweetStoreReseted: (state) =&gt; initialState(),
    },
  });
  
  export const { tweetAdded, tweetStoreReseted } = slice.actions;
  export default slice.reducer;
  
  // Action creators
  export const fetchTweets = (term) =&gt;
    sagaApiCallBegan({
      url: `/setsearchterm/${term}`,
      method: 'get',
      onSuccess: sagaApiCallSuccess.type,
      onError: sagaApiCallFailed.type,
    });
  
  export const fetchTweetsPause = () =&gt;
    sagaApiCallBegan({
      url: '/pause',
      method: 'GET',
      onSuccess: sagaApiCallSuccess.type,
      onError: sagaApiCallFailed.type,
    });
  
  export const getTweet = (message) =&gt;
    webSocketCallBegan({
      message: message,
      onSuccess: tweetAdded.type,
      onError: webSocketCallFailed.type,
    });
  </code></pre>
  <p>file - <strong>action/saga.js</strong></p>
  <pre><code>import { createAction } from '@reduxjs/toolkit';
  
  export const sagaApiCallBegan = createAction('saga/apiCallBegan');
  export const sagaApiCallSuccess = createAction('saga/apiCallSuccess');
  export const sagaApiCallFailed = createAction('saga/apiCallFailed');
  </code></pre>