Магазин Redux, имеющий несколько «версий» состояний под именами редуктора - PullRequest
Новая
       6

Магазин Redux, имеющий несколько «версий» состояний под именами редуктора

0 голосов
/ 09 июня 2018

Я пытался разделить файлы редуктора для каждого имеющегося у меня файла контейнера, что привело к разному экспорту редуктора для каждого контейнера, и я объединяю его с combineReducers.

Я хочу, чтобы в моем хранилище было структурированное состояниевот так: 

state = {
      currentFilter: 'all',
      todos: [],
      displayed: [],
    }

Но вместо этого получите такую ​​структуру: 

state = {
      addReducer: {
        currentFilter: 'all',
        todos: [],
        displayed: [],
      },
      displayReducer: {
        currentFilter: 'all',
        todos: [],
        displayed: [],
      },
      filterReducer: {
        currentFilter: 'all',
        todos: [],
        displayed: [],
      }
    }

как я создаю магазин: 

const store = createStore(
      combineReducers({addReducer, displayReducer, filterReducer}),
      applyMiddleware(thunk, logger)
    );

Проблема в том, чтоотправлено действие, состояние «срез», которое было обновлено, является только частью, связанной с редуктором, обрабатывающим это действие (в данном случае ниже, только срез на addReducer был обновлен.

Способ написания моегоredurs экспортирует только функцию 1 reduce для каждого файла редуктора.

Есть ли обходной путь для решения этой проблемы или лучший и более правильный способ работы с несколькими редукторами, чтобы «единый источник правды»Концепция действительно происходит в моем магазине Redux (вместо другого источника для другого редуктора)? Спасибо!

РЕДАКТИРОВАТЬ: один из моих редукторов (два других очень похожи на это наe, принимая только 1 регистр коммутатора и регистр по умолчанию) 

export default function reduce(state = initialState, action) {  
  switch (action.type) {
    case types.ADD_TODO:
      let newTodos = [...state.todos, action.data.todo];
      let newDisplayed = [...state.displayed];
      if (state.currentFilter !== 'completed') {
        newDisplayed.push(action.data.todo);
      }
      console.log(Object.assign(
        {},
        state,
        {
          todos: newTodos,
          displayed: newDisplayed,
        }
      ));
      console.log('newTodos:', action.data.todo);
      return Object.assign(
        {},
        state,
        {
          todos: newTodos,
          displayed: newDisplayed,
        }
      );
    default:
      return state;
  }
};

1 Ответ

0 голосов
/ 09 июня 2018

Я думаю, что вы путаете вещи, у вас должен быть только один редуктор, а не три (в вашем сценарии).Вы должны создавать разные редукторы для управления разными частями состояния, вы не должны создавать разные редукторы для одной и той же части состояния, просто обращаясь к различным функциям.Для этого у вас есть создатели действий.

Вы нарушаете принцип «единого источника истины» с самого начала.Поэтому я предлагаю иметь один редуктор только в вашем случае.

Подробнее об этом см. В документации с хорошими примерами. LINK

Просто наименование предполагает путаницу, у вас должен быть todoReducer, который связан с ресурсом todo в вашем приложении.addReducer ассоциируется с типом действия, аналогичным для двух других, что не является тем, что вы хотите сделать.

Я надеюсь, что это немного проясняет ситуацию, но когда вы сомневаетесь, проверяете документы с избыточностью, они довольноздорово!

...