React Redux Reducer не сохраняет другие состояния

Question

Я пытаюсь использовать API-интерфейс stackoverflow, чтобы сделать мой первый проект реагировать на избыточность.Мне нужно поддерживать состояние, подобное следующему:

{
    selectedTag: reactjs,
    selectedSortOrder: activity,
    items:[]
}

Мой редуктор указан ниже:

const initialState = {
  selectedTag: 'C#',
  selectedSortOrder: 'activity', items: []
}

function SelectTag(state = initialState, action) {
  switch (action.type) {
    case SELECTTAG:
      //  console.log(state);
      return Object.assign({}, state, { selectedTag: action.selectedTag });
    default:
      return state;
  }
}

function SelectSortOrder(state = initialState, action) {
  switch (action.type) {
    case SELECTSORTORDER:
      //console.log(state);
      return Object.assign({}, state, { selectedSortOrder: action.selectedSortOrder });
    default:
      return state;
  }
}

function ReceivePosts(state = { items: [] }, action) {
  switch
  (action.type) {
    case RECEIVESORTEDPOSTS:
    case RECEIVEPOST:
      console.log(state);
      return Object.assign({}, state, { items: action.items })
    default:
      return state
  }
}

const rootReducer = combineReducers({ ReceivePosts, SelectTag, SelectSortOrder })

И mapStateToProps:

const mapStateToProps = (state) => {
  const selectedTag = state.SelectTag.selectedTag;
  const items = (state.ReceivePosts.items);
  const tags = (state.ReceiveTags.tags);
  const selectedSortOrder = state.SelectSortOrder.selectedSortOrder;
  return {selectedTag, items, tags, selectedSortOrder};
}

У меня есть 2проблемы здесь:

a.Государство не помнит все данные.Например,Предположим, что сначала я выбрал тег, а затем получил элементы, в моем штате есть только элементы.SelectedTag не установлен в состоянии.

b.Я не уверен, почему mapStateToProps нужно имя редуктора.Например: const selectedTag = state.SelectTag.selectedTag;

На самом деле это должен быть state.selectedTag.Но мой код ожидает, что имя редуктора "SelectTag" выберет значение состояния.

Что я делаю не так?

Answer 1

Вы неправильно настроили свои редукторы.InitialState присваивается всем вашим редукторам, которые не требуются

 const initialState={   
    selectedTag:'C#',  
    selectedSortOrder:'activity',
    items:[]
 }

function SelectTag(state = initialState.selectedTag, action){  
  switch(action.type){ 
     case SELECTTAG:
       return action.selectedTag
     default:
       return state;   
  }
}

function SelectSortOrder(state = initialState.selectedSortOrder, action){  
  switch(action.type){
     case SELECTSORTORDER:
       return action.selectedSortOrder
     default:
       return state;
    }
}

function ReceivePosts(state = {items:[]}, action){   
   switch(action.type){
       case RECEIVESORTEDPOSTS:
       case RECEIVEPOST:
         console.log(state);
         return Object.assign({}, state, {items:action.items})
       default:
         return state
     }
 }

const rootReducer = combineReducers({ReceivePosts, SelectTag, SelectSortOrder})

---

И в mapStateToProps вы будете использовать его как

const mapStateToProps = (state) => {
  const selectedTag = state.SelectTag;
  const items = (state.ReceivePosts.items);
  const tags = (state.ReceiveTags.tags);
  const selectedSortOrder = state.SelectSortOrder;
  return {selectedTag, items, tags, selectedSortOrder};
}

Answer 2

1.Попробуйте изменить это код

const initialState = {
  selectedTag: 'C#',
  selectedSortOrder: 'activity', 
  items: []
}

function SelectTag(state = initialState.selectedTag, action) {
  switch (action.type) {
    case SELECT TAG:
      return {
        ...state,
        selectedTag: action.selectedTag
      }
    default:
      return state;
  }
}

function SelectSortOrder(state = initialState.selectedSortOrder, action) {
  switch (action.type) {
    case SELECTSORTORDER:
      return {
        ...state,
        selectedSortOrder: action.selectedSortOrder
      }
    default:
      return state;
  }
}

function ReceivePosts(state = { items: [] }, action) {
  switch (action.type) {
    case RECEIVESORTEDPOSTS:
    case RECEIVEPOST:
      return {
        ...state,
        items: action.items
      }
    default:
      return state
  }
}

const rootReducer = combineReducers({ ReceivePosts, SelectTag, SelectSortOrder });

2. Я не уверен, почему mapStateToProps требует имя редуктора.Например: const selectedTag = state.SelectTag.selectedTag;

Это потому, что когда вы используете combinereducers, вы объединяете несколько срезов данных, тогда вам нужно указать срез из которого вы хотите получить данные.

const rootReducer = combineReducers({ 
    receivePosts = ReceivePosts, 
    selectTag = SelectTag, 
    selectSortOrder = SelectSortOrder 
});

Проблема: Вы неправильно настроили initialstate , вы используете то же initialstate в SelectTag, а также в SelectSortOrder, если начальное состояние такое же, тогда зачем вам два редуктора?