时间戳

首页 > 解决方案 > combineReducers 是覆盖状态而不是设置不同的状态

javascript - combineReducers 是覆盖状态而不是设置不同的状态

问题描述

我正在尝试学习 Redux。我有这个获取数据的动作：

export const FETCH_SUCCESS = "FETCH_SUCCESS";
import axios from "axios";

export const fetchData = () => {
  return async dispatch => {
    try {
      const result = await axios(
        `url`
      );
      dispatch({ type: FETCH_SUCCESS, payload: { result } });
    } catch (error) {
      console.log(error);
    }
  };
};

而这个减速器：

import { FETCH_SUCCESS } from "../actions/mainCategories";

const initialState = {
  mainCategories: []
};

const mainCategoriesReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_SUCCESS:
      return { data: action.payload.result.data };
    default:
      return state;
  }
};

export default mainCategoriesReducer;

我使用了两次，一次用于 mainCategories 和完全相同的代码用于我的子类别但在不同的文件中，以便我可以将它组合到 App.js 中，如下所示：

import mainCategoriesReducer from "./store/reducers/mainCategories";
import subCategoriesReducer from "./store/reducers/subCategories";

const rootReducer = combineReducers({
  mainCategories: mainCategoriesReducer,
  subCategories: subCategoriesReducer,
});

const store = createStore(rootReducer, applyMiddleware(ReduxThunk));

我将 Provider 与我的应用程序周围的存储商店一起包装：

<Provider store={store}>
   <App />
</Provider>

在组件中，我像这样使用它：

import { fetchData } from "../store/actions/mainCategories";

const mainCategories = useSelector(state => state.mainCategories);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

对于 subCategories 也是如此，但具有相应的导入和状态 (state.subCategories)

一切都按预期工作。当应用程序加载时，它会获取我的 mainCategories。我可以导航到我的子类别，但是当我返回时，主类别被子类别覆盖。

似乎 combineReducers 合并/覆盖而不是创建不同的状态。我究竟做错了什么？谢谢

标签： javascriptreactjsreact-nativereact-redux

解决方案

您需要不同的类型名称才能完成这项工作。当您组合减速器时，应用程序知道如何将您的操作路由到正确的商店非常重要。如果你想同时调用它们FETCH_SUCCESS，我认为这很好，但在定义前面添加路径：

在您的主要类别操作文件中：

export const FETCH_SUCCESS = "mainCategories/FETCH_SUCCESS";

并在您的子类别操作文件中：

export const FETCH_SUCCESS = "subCategories/FETCH_SUCCESS";

FETCH_SUCCESS这应该可以，但是如果仍然无法正常工作，您可能还需要重命名变量。

推荐阅读