title: Redux Saga action async action called once but fired twice
body: <p>So I dispatch my redux-saga action once from my react-native app and it makes two API calls. I'm trying to figure out why this is, and how to only have it send one.</p>
  <p>App.js</p>
  <pre><code>  const initFetch = async () =&gt; {
      const userToken = await AsyncStorage.getItem(&quot;userToken&quot;);
      dispatch(fetchLiked({ page: 0, search: &quot;&quot;, userToken }));
    };
  
    useEffect(() =&gt; {
      initFetch();
    }, []);
  </code></pre>
  <p>configureStore.js</p>
  <pre><code>import { createStore, combineReducers, applyMiddleware } from &quot;redux&quot;;
  import { persistStore, persistReducer } from &quot;redux-persist&quot;;
  import AsyncStorage from &quot;@react-native-community/async-storage&quot;;
  import likedReducer from &quot;./reducers/liked&quot;;
  import createSagaMiddleware from &quot;redux-saga&quot;;
  import rootSaga from &quot;./sagas/rootSaga&quot;;
  
  const rootReducer = combineReducers({
    liked: likedReducer,
  });
  
  const persistConfig = {
    key: &quot;primary&quot;,
    storage: AsyncStorage,
  };
  
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  
  const sagaMiddleware = createSagaMiddleware();
  
  export default () =&gt; {
    let store = createStore(persistedReducer, applyMiddleware(sagaMiddleware));
    sagaMiddleware.run(rootSaga);
    let persistor = persistStore(store);
    return { store, persistor };
  };
  </code></pre>
  <p>rootSaga.js</p>
  <pre><code>import { take, call, all } from &quot;redux-saga/effects&quot;;
  import { watchFetchLikedSaga } from &quot;./likedSaga&quot;;
  
  export default function* rootSaga() {
    yield all([watchFetchLikedSaga()]);
  }
  </code></pre>
  <p>likedSaga.js</p>
  <pre><code>import { takeLatest, call, put } from &quot;redux-saga/effects&quot;;
  import Server from &quot;../../utils/Server&quot;;
  import { fetchLikedSuccess } from &quot;./../actions/liked&quot;;
  import { types } from &quot;../actions/types&quot;;
  
  function* asyncFetchLiked(data) {
    console.log(&quot;sending async fetch&quot;);
    const { page, search, userToken } = data.payload;
    try {
      const response = yield call(() =&gt;
        Server.get(&quot;/api/titles/getliked&quot;, {
          headers: { &quot;auth-token&quot;: userToken },
          params: { page: page, search: search },
        })
      );
      yield put(fetchLikedSuccess(response.data));
    } catch (e) {
      console.log(e);
    }
  }
  
  export function* watchFetchLikedSaga() {
    yield takeLatest(types.SEND_REQUEST, asyncFetchLiked);
  }
  </code></pre>
  <p>export const fetchLiked = (data) =&gt; {
  return {
  type: types.SEND_REQUEST,
  payload: data,
  };
  };</p>
  <p>actions/liked.js</p>
  <pre><code>export const fetchLiked = (data) =&gt; {
    console.log(&quot;fetchLiked&quot;);
    return {
      type: types.SEND_REQUEST,
      payload: data,
    };
  };
  
  export const fetchLikedSuccess = (data) =&gt; {
    console.log(&quot;fetchLikedSuccess&quot;);
    return {
      type: types.SEND_REQUEST_SUCCESS,
      payload: data,
    };
  };
  
  export const fetchLikedFailure = (error) =&gt; {
    return {
      type: types.SEND_REQUEST_FAILURE,
      payload: {},
      error: error,
    };
  };
  </code></pre>
  <p>My console.log output looks like this. You can see the action is only being dispatched once, but it is sending two async requests and calling the reducer success action twice.</p>
  <pre><code>fetchLiked
  sending async fetch
  sending async fetch
  fetchLikedSuccess
  fetchLikedSuccess
  </code></pre>