我如何在规范商店后使用选择器访问Redux项目？

我对我的Redux商店进行了规范化后，我对如何使用选择器感到困惑。我如何在规范商店后使用选择器访问Redux项目？

我有以下设置为我的商店：

const DEFAULT_STATE = { 
    allId: [], 
    locations: {} 
};

随着我的减速器如下：

handleActions({ 
    ['UPDATE']: (state, action) => { 
    let newID = state.allId.length; 

    const allId = [...state.allId, newID]; 
    const locations = { 
     ...state.locations, 
     [newID]: action.payload 
    }; 
    return {allId, locations}; 
    } 
}), 
...

我想我会想这样的事情对我的组件：

function mapStateToProps(state) { 
    return { 
    share: callMySelector(state) 
    }; 
}

但我不明白我的选择器将如何做除了返回location与最近的ID相关联。我认为规范化在这里也不是很好 - 因为我不会在常规情况下最终通过ID搜索。

来源

2017-08-18 abrarisme

选择器的威力在于它将过滤逻辑从消耗数据的组件移开，并远离动作/缩减器转换为可重用的功能。你提到了最近的位置。从reducer中的更新逻辑中，我们只需制作一个抓取最后一项的选择器即可。

function selectLatestLocation(state) { 
    const latestId = state.allIds[state.allIds.length - 1]; 

    return state.locations[latestId]; 
}

这里假设位置数据是以位置id为关键字来构造的。

{ 
    1: { id: 1, name: "USA" }, 
    2: { id: 2, name: "Europe" } 
}

在这种情况下，规范化数据没有太大的作用。但是让我们说要求改变，现在我们只想要欧洲的地点。我们可以拥有另一个名为europeIds的州属性，其中包含所有欧洲位置ID。

function selectEuropeLocations(state) { 
    return state.europeIds.map(id => state.locations[id]); 
}

使用标准化Redux状态的选择器可以很容易地改变数据的过滤方式。现在就像你说的，有些情况下可能不需要标准化。这真的取决于项目，以及正在完成的项目。但是，对于需要记忆或以不同方式过滤的数据来说，这绝对是值得的！

来源

2017-08-18 03:58:06 dpaulus

我如何在规范商店后使用选择器访问Redux项目？

回答

相关问题