Question

我正在尝试使用stackoverflow api进行第一个反应redux项目。我需要保持如下状态：

{
    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

1。尝试更改此代码

Reject

2。 我不确定为什么mapStateToProps需要减速器名称。例如：const 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 });

这是因为使用selectedTag = state.SelectTag.selectedTag;时，您要合并多个切片数据，然后需要指定要从中获取切片数据。

combinereducers

问题：您尚未正确配置初始状态，您在const rootReducer = combineReducers({ receivePosts = ReceivePosts, selectTag = SelectTag, selectSortOrder = SelectSortOrder });和{ {1}}，如果初始状态相同，那么为什么需要两个减速器？

Answer 2

您没有正确配置减速器。将initialState分配给您所有不需要的reducer

 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};
}

React Redux Reducer不保留其他状态

2 个答案: