Question

我有一个动作/减速器/组件。在我的一个组件（组件转储）中，我有一个Select。我得到有关我的商店的过滤器类型的信息。我在哪里可以处理它或减速机？

Answer 1

IMO，对数据进行排序的正确位置不是直接在reducer中，而是在选择器中。

来自redux docs：

Computing Derived Data

Reselect是一个用于创建memoized，可组合选择器函数的简单库。重选选择器可用于有效地计算Redux存储中的派生数据。

我目前正在使用选择器来过滤和排序数据。

状态中没有数据重复。您不必存储按特定方式排序的项目副本。
可以在不同的组件中使用相同的数据，每个组件使用不同的选择器功能进行排序，例如。
您可以使用应用程序中已有的选择器组合选择器应用许多数据计算。
如果你做得对，你的选择器将是纯函数，那么你可以轻松地测试它们。
在许多组件中使用相同的选择器。

Answer 2

您可以在使用Redux商店@connect -ing React组件时对数据进行排序：

function mapStateToProps(state) {
   var items = state.items.slice(0);
   items.sort()
   return {
     items: items
   }
}

@connect(mapStoreToProps)
class MyComponent extends React.Component {
   render() {
      var items = this.props.items;
   }
}

Redux文档在Todo示例中显示了类似的案例：https://redux.js.org/basics/usage-with-react

Answer 3

我在Redux商店中保存了items，sortKey和sortKind（asc / desc）。

在我的Angular组件中（我相信React会相同），我将商店状态作为Observable获取，以便我可以在UX中显示items，sortKey和sortOrder。

当用户点击表列以更改排序键（顺序）时，我将新键/排序顺序分配给该状态的reducer。

然后reducer执行新的排序，并返回具有更新值的新状态。

组件中的Observable因此引发了更新UX的事件。

优势：

将排序逻辑排除在组件之外
通过将sortKey和sortKind保存在状态中，如果用户刷新浏览器，您可以精确地恢复UX（我使用Redux-LocalStorage进行同步）
由于商店具有已排序的商品，因此您只会在用户主动要求时执行排序。
当用户可能返回组件时，会记住已排序的项目。

我的reducer（“bizzes”是我的项目列表，我使用Immutable.List存储项目）

import { List }                     from 'immutable';
import { IBizz, IBizzState }   from './bizz.types';
import { BIZZES_SET, BIZZES_SORT}    from 'store/constants';

const SORT_ASC = 'asc';
const SORT_DESC = 'desc';

const defaultSortKey = 'serialNo';
const defaultSortOrder = SORT_ASC;

const INITIAL_STATE: IBizzState =  {
    bizzes: List([]),
    sortKey: defaultSortKey,
    sortOrder: defaultSortOrder
};

export function bizzReducer(state: IBizzState = INITIAL_STATE, action: any): IBizzState {

    switch (action.type) {

        case BIZZES_SET:
            return {
                bizzes: List(action.payload.bizzes),
                sortKey: action.payload.sortKey || defaultSortKey,
                sortOrder: action.payload.sortOrder || defaultSortOrder
            };

        case BIZZES_SORT:
            let sortKey = action.payload.sortKey || defaultSortKey;

            if(sortKey === state.sortKey) {
                state.sortOrder = state.sortOrder === SORT_ASC ? SORT_DESC : SORT_ASC;
            }

            return {
                bizzes: List(state.bizzes.sort( (a, b) => { 
                    if( a[sortKey] < b[sortKey] ) return state.sortOrder === SORT_ASC ? -1 : 1;
                    if( a[sortKey] > b[sortKey] ) return state.sortOrder === SORT_ASC ? 1: -1;
                    return 0;
                })),
                sortKey: sortKey,
                sortOrder: state.sortOrder
            };
        default: return state;
    }
}

我的组件（我使用Ng2-Redux将商店作为Observables）：

import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { select } from 'store';
import { BizzActions } from 'actions/index';

@Component({
    selector: 'bizzlist',
    templateUrl: './bizz-list.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class BizzListComponent implements OnInit {


    @select([ 'bizzState']) bizzState$;

    public sortOrder: string;
    public sortKey: string;
    public bizzes = [];
    private bizzStateSubscription; 


    constructor( 
        public bizzActions: BizzActions
    ) { }

    ngOnInit() {
        this.bizzStateSubscription = this.bizzState$.subscribe( bizzState => {
            this.bizzes = bizzState.bizzes;
            this.sortKey = bizzState.sortKey;
            this.sortOrder = bizzState.sortOrder;
        });
     }

    ngOnDestroy() {
        this.bizzStateSubscription.unsubscribe();
    }



    public sortBizzes(key) {
        this.bizzActions.sortBizzes(key); 
    }
}

正如您所看到的，我正在使用Action（称为BizzActions）来执行实际的Redux调度。您可以在组件中执行此操作，但我更愿意将这些内容分开。好的方法，这是我的BizzActions（服务）：

import { Injectable }           from '@angular/core';
import { NgRedux, IAppState }   from 'store';
import { 
    BIZZES_SET,
    BIZZES_SORT 
} from 'store/constants';

@Injectable()
export class BizzActions {

    constructor (private ngRedux: NgRedux<IAppState>) {}

    public setBizzes = (bizzes: any) => {
        return this.ngRedux.dispatch({
            type: BIZZES_SET,
            payload: {
                bizzes: bizzes
            }
        });
    };

    public sortBizzes = (key:string) => {
        return this.ngRedux.dispatch({
            type: BIZZES_SORT,
            payload: {
                sortKey: key
            }
        });
    };

}

Answer 4

我一直在使用section字典模式对Reducer进行排序。换句话说，我按标题对项目进行排序，比如日期，然后按日期键将对象存储在数组中：

sectionHeaders: ["Monday", "Tuesday"],
dict:{
    Monday: [{obj1},{obj2},{obj3}],
    Tuesday: [{obj4}],
}

然后我在React Native中使用这个dict来填充我的ListView，因为除了这个对象格式之外，ListView将使用cloneWithRowsAndSections方法呈现带有Sections的Items。

这是性能优化，因为我的排序并不简单。我必须进行深度比较，这样我只在我第一次填充商店时才这样做，而不是每次渲染场景时都这样做。

我还习惯使用ID中的字典并仅在已排序的dict中存储ID而不是实际的对象。

虽然有这样的权衡，因为更新更复杂，如果从某个部分删除了某个项目，您必须决定何时删除部分标题。

我应该在哪里处理Redux App中的排序？

4 个答案: