title: Redux state overwritten after next fetch
body: <p>In my web app, I want to fetch urls from an API. Also, I want to fetch categories for these items.</p>
  
  <p>index.js:</p>
  
  <pre><code> componentDidMount () {
     this.props.fetchUrls();
     this.props.fetchCategories();
   }
  </code></pre>
  
  <p>Im fetching the urls first like that:</p>
  
  <pre><code>export const fetchUrlsSuccess = urls =&gt; ({
    type: FETCH_URLS_SUCCESS,
    payload: { urls }
  });
  
  export const fetchUrls = () =&gt; dispatch =&gt; {
    dispatch(fetchUrlsBegin());
  
    return fetch(`${api}/urls`)
      .then(handleErrors)
      .then(res =&gt; res.json())
      .then(json =&gt; {
        dispatch(fetchUrlsSuccess(json));
        return json.urls;
      })
      .catch(error =&gt; dispatch(fetchUrlsFailure(error)));
  };
  </code></pre>
  
  <p>fetching categories:</p>
  
  <pre><code>export const fetchCategoriesSuccess = categories =&gt; ({
    type: FETCH_CATEGORIES_SUCCESS,
    payload: { categories }
  });
  
  export const fetchCategoriesFailure = error =&gt; ({
    type: FETCH_CATEGORIES_FAILURE,
    payload: { error }
  });
  
  export function fetchCategories() {
    return dispatch =&gt; {
      dispatch(fetchCategoriesBegin());
      return fetch(`${api}/categories`)
        .then(handleErrors)
        .then(res =&gt; res.json())
        .then(json =&gt; {
          dispatch(fetchCategoriesSuccess(json));
          return json.categories;
        })
        .catch(error =&gt; dispatch(fetchCategoriesFailure(error)));
    };
  }
  </code></pre>
  
  <p>url reducer: </p>
  
  <pre><code>import {
    FETCH_URLS_BEGIN,
    FETCH_URLS_SUCCESS,
    FETCH_URLS_FAILURE
  } from "../actions/types";
  
  export default function urlReducer(state = [], action) {
    switch (action.type) {
      case FETCH_URLS_BEGIN:
        console.log("url fetch begin", state);
        return {
          ...state,
          loading: true,
          error: null
        };
  
      case FETCH_URLS_SUCCESS:
        console.log("url fetch success", state);
        return {
          ...state,
          loading: false,
          items: action.payload.urls
        };
  
      case FETCH_URLS_FAILURE:
        console.log("url fetch error", state);
        return {
          ...state,
          loading: false,
          error: action.payload.error,
          items: []
        };
  
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>categories reducer:</p>
  
  <pre><code>import {
    FETCH_CATEGORIES_BEGIN,
    FETCH_CATEGORIES_SUCCESS,
    FETCH_CATEGORIES_FAILURE
  } from "../actions/types";
  
  export default function categoriesReducer(state = [], action) {
    switch (action.type) {
      case FETCH_CATEGORIES_BEGIN:
        console.log("categories fetch begin", state);
        return {
          ...state,
          loading: true,
          error: null
        };
  
      case FETCH_CATEGORIES_SUCCESS:
        console.log("categories fetch success", state);
        return {
          ...state,
          loading: false,
          items: action.payload.categories
        };
  
      case FETCH_CATEGORIES_FAILURE:
        console.log("categories fetch fail", state);
        return {
          ...state,
          loading: false,
          error: action.payload.error,
          items: []
        };
  
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>combining reducers in index of reducers:</p>
  
  <pre><code>import { combineReducers } from "redux";
  import urlReducer from "./urlReducer";
  import categoriesReducer from "./categoriesReducer";
  import modalReducer from "./modalReducer";
  
  export default combineReducers({
    urls: urlReducer,
    modal: modalReducer,
    categories: categoriesReducer
  });
  </code></pre>
  
  <p>create store :</p>
  
  <pre><code>import { createStore, applyMiddleware, compose } from "redux";
  import { persistStore, persistReducer } from "redux-persist";
  import thunk from "redux-thunk";
  import storage from "redux-persist/lib/storage";
  
  import rootReducer from "../reducers";
  
  const persistConfig = {
    key: "root",
    storage
  };
  
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  
  const middleware = [thunk];
  
  let store = createStore(
    persistedReducer,
    compose(
      applyMiddleware(...middleware),
      window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()
    )
  );
  let persistor = persistStore(store);
  export { store, persistor };
  </code></pre>
  
  <p>For the categories, I do the same. Then I combine both reducers.</p>
  
  <p>What happens is that the state.urls. Items get overwritten and state.categories.items holds state instead. I don't understand why. </p>
  
  <p>output of the redux dev-tool after the second fetch:</p>
  
  <p><a href="https://i.stack.imgur.com/UQsHQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UQsHQ.png" alt="https://i.stack.imgur.com/UQsHQ.png"></a></p>
  
  <p>I'm pretty new to redux and don't understand the state management... </p>