зернокомбайны перезаписывают состояние вместо того, чтобы устанавливать разные состояния - PullRequest
Новая
       9

зернокомбайны перезаписывают состояние вместо того, чтобы устанавливать разные состояния

0 голосов
/ 22 февраля 2020

Я пытаюсь выучить 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 и точно такой же код для моих подкатегорий, но в разных файлы, чтобы я мог объединить его в приложении. 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 store={store}>
   <App />
</Provider>

В компонентах Я использую это так: 

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

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

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

И то же самое для подкатегорий, но с соответствующими импортами и состояниями (state.subCategories)

Все работает, как ожидалось. Когда приложение загружается, оно выбирает мои основные категории. Я могу перейти к своим подкатегориям, но когда я go вернусь, основные категории будут перезаписаны подкатегориями.

Похоже, что combReducers объединяет / перезаписывает вместо создания различных состояний. Что я делаю неправильно? Спасибо

1 Ответ

0 голосов
/ 22 февраля 2020

Вам нужны разные имена типов, чтобы сделать эту работу. Когда вы объединяете редукторы, важно, чтобы приложение знало, как направить ваши действия в правильное хранилище. Если вы хотите назвать их обоих FETCH_SUCCESS, я думаю, это нормально, но добавьте путь перед определением:

в файле действий основных категорий: 

export const FETCH_SUCCESS = "mainCategories/FETCH_SUCCESS";

и в файл действий вашей подкатегории: 

export const FETCH_SUCCESS = "subCategories/FETCH_SUCCESS";

Это должно работать, но вам также может потребоваться переименовать переменные FETCH_SUCCESS, если они все еще не работают.

...