下次提取后，Redux状态被覆盖

Question

在我的Web应用程序中，我想从API中获取网址。另外，我想获取这些商品的类别。

index.js：

 componentDidMount () {
   this.props.fetchUrls();
   this.props.fetchCategories();
 }

我首先要这样获取网址：

export const fetchUrlsSuccess = urls => ({
  type: FETCH_URLS_SUCCESS,
  payload: { urls }
});

export const fetchUrls = () => dispatch => {
  dispatch(fetchUrlsBegin());

  return fetch(`${api}/urls`)
    .then(handleErrors)
    .then(res => res.json())
    .then(json => {
      dispatch(fetchUrlsSuccess(json));
      return json.urls;
    })
    .catch(error => dispatch(fetchUrlsFailure(error)));
};

获取类别：

export const fetchCategoriesSuccess = categories => ({
  type: FETCH_CATEGORIES_SUCCESS,
  payload: { categories }
});

export const fetchCategoriesFailure = error => ({
  type: FETCH_CATEGORIES_FAILURE,
  payload: { error }
});

export function fetchCategories() {
  return dispatch => {
    dispatch(fetchCategoriesBegin());
    return fetch(`${api}/categories`)
      .then(handleErrors)
      .then(res => res.json())
      .then(json => {
        dispatch(fetchCategoriesSuccess(json));
        return json.categories;
      })
      .catch(error => dispatch(fetchCategoriesFailure(error)));
  };
}

网址缩减工具：

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

类别还原剂：

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

在减速器索引中组合减速器

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

创建商店：

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__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);
let persistor = persistStore(store);
export { store, persistor };

对于类别，我也这样做。然后，我将两个减速器组合在一起。

发生的是state.urls。项目将被覆盖，state.categories.items改为保留状态。我不明白为什么。

在第二次提取后，

redux开发工具的输出：

我对redux还是很陌生，不了解状态管理...