在哪里调用选择器？

Question

我的任务是在redux应用程序中实现选择器。我在网上阅读关于redux选择器的所有内容都谈到了React，以及如何使用选择器替换mapStateToProps中的内容。什么是相同/我会在秘银应用程序中执行此操作？

Answer 1

我对Mithril并不熟悉，但Redux状态选择器独立于React。它们只是期望状态的函数并返回：

一片状态
或来自州的数据

例如，如果我的Redux状态有一个名为 records 的条目，其中包含模型列表：

{
    records: [ ... ],
}

我可以创建一个返回长度的选择器：

const numOfRecords = state => state.records.length

或者，如果我的州也跟踪 sortBy 值：

const sortedRecords = state => state.records.sort(sortByFn(state.sortBy))

选择器有助于提高性能并减少更新需求。（reselect是一个很好的模块）。

它们也非常适合开发依赖于存储在应用程序状态中的数据的模块化代码片段，但实际上并不想知道数据的来源。

Answer 2

在mithril应用程序中，我会在哪里做什么？

首先，您不需要等效的，您可以使用与React应用程序中完全相同的选择器。

在哪里调用选择器？

您可以在任何地方调用选择器，但我建议将它们调用到尽可能接近数据的位置。不要在组件层次结构中的组件中调用选择器，只是在数据最终通过实际使用数据的组件之前通过几个组件向下传递数据 - 除非您有充分的理由这样做。

对于大多数情况，您可以在view - 函数内调用选择器，尽管您可能会遇到需要在其他lifecycle methods中调用选择器的情况。在某些应用程序中，您可能还想在m.render中使用选择器。

我头顶的几个例子：

创建DOM元素时view函数内部

var LoggedinUserDetails = {
    view: function () {
        return m('', [
            m('', getLoggedinUserName(store.getState())), // getLoggedinUserName is a selector
            m('img', { src: getLoggedinUserImageUrl(store.getState()) }) // getLoggedinUserImageUrl is a selector
        ])
    }
}

创建Mithril组件时view函数内部

var UserDetails = {
    view: function (attrs) {
        return m('', [
            m('', attrs.user.name),
            m('img', { src: attrs.user.imageUrl })
        ])
    }
}

    ...
    m(UserDetails, { user: getLoggedInUserDetails(store.getState()) }) // getLoggedInUserDetails is a selector

内部m.render

在这个例子中，我们有一个游戏要求我们在任何改变后重新渲染整个页面。

function onStateChange() {
    var state = store.getState();

    m.render(document.body, m(Game, {
        map: getMap(state),
        players: getPlayers(state),
        visibleArea: getVisibleArea(state)
    }));
}

// Receiving partial state updates from server via websockets
websocket.on('update-map', function (map) {
    store.dispatch({ type: 'update-map', payload: map });
});

websocket.on('update-players', function (players) {
    store.dispatch({ type: 'update-players', payload: players });
});

// Changing state based on user input
window.addEventListener('keydown', function (event) {
    switch (event.key) {
        case 'Enter':
            store.dispatch({ type: 'move-visible-area-to-next-player' });
            break;
    }
});

秘银中的Redux选择器

2 个答案:

在哪里调用选择器？