Question

我正在尝试学习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和存储的存储区包装在我的App周围：

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

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

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

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

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

与子类别相同，但具有相应的导入和状态（state.subCategories）

一切正常。应用加载时，它将获取我的mainCategories。我可以导航到子类别，但是当我返回时，mainCategories被subCategories覆盖。

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

Answer 1

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

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

export const FETCH_SUCCESS = "mainCategories/FETCH_SUCCESS";

以及您的子类别操作文件中：

export const FETCH_SUCCESS = "subCategories/FETCH_SUCCESS";

应该可以，但是如果FETCH_SUCCESS变量仍然无法使用，则可能需要重命名。

CombineReducers是覆盖状态，而不是设置不同的状态

1 个答案: