Redex App의 정렬은 어디에서 처리해야 하는가?

Redex App의 정렬은 어디에서 처리해야 하는가?

내게는 작용/감속기/부품이 있다.내 구성품 중 하나(구성품 덤프)에 선택 항목이 있다.나는 내 가게의 필터 종류에 대한 정보를 얻는다.내가 그것을 어디에서 액션이나 환원기를 다룰 수 있을까?

IMO, 데이터를 정렬할 수 있는 적절한 장소는 환원기에 직접 있는 것이 아니라 선택기에 있다.

원본 환원 문서:

파생 데이터 계산

리셀렉트는 메모화되고 복합적인 선택기 기능을 만들기 위한 간단한 라이브러리 입니다.리셀렉트 셀렉터는 Redex 스토어에서 파생된 데이터를 효율적으로 계산하는 데 사용할 수 있다.

나는 현재 데이터를 필터링하고 정렬하기 위해 선택기를 사용하고 있다.

1. 주(州)에 데이터 반복 없음.한 가지 특정 방법으로 정렬된 항목의 사본을 저장할 필요는 없다.
2. 동일한 데이터를 다른 구성 요소에 사용할 수 있으며, 각 구성 요소는 예를 들어 정렬하기 위해 서로 다른 선택기 기능을 사용한다.
3. 응용 프로그램에 이미 있는 선택기를 사용하여 많은 데이터 계산을 적용하는 선택기를 결합할 수 있다.
4. 만약 당신이 제대로 한다면, 당신의 선택기는 순수한 기능이 될 것이고, 당신은 그것들을 쉽게 테스트할 수 있을 것이다.
5. 여러 구성 요소에서 동일한 선택기를 사용하십시오.

항목, sortKey 및 sortKind(asc/desc)를 Redex Store에 저장한다.

My Angulative 컴포넌트(반응의 경우 동일할 것으로 믿음)에서는 UX에서 품목, sortKey, sortOrder를 표시할 수 있도록 상점 상태를 Observable로 지정한다.

사용자가 테이블 열을 클릭하여 정렬 키(주문)를 변경하면 새 키/소트 오더를 주/축소기에 발송한다.

그런 다음 환원기는 새 정렬을 수행하고 업데이트된 값으로 새 상태를 반환한다.

따라서 구성요소의 관측 가능은 UX를 업데이트하는 이벤트를 촉발한다.

장점:

• 구성 요소에서 논리를 계속 분류하다.

• sortKey 및 sortKind를 state에 저장하여 사용자가 브라우저를 새로 고치면 UX를 정확하게 복원할 수 있다(Redx-LocalStorage를 사용하여 동기화할 경우

• 스토어에 정렬된 항목이 있으므로 사용자가 적극적으로 원할 때만 정렬을 수행할 수 있다.

• 정렬된 항목은 사용자가 구성요소로 돌아갈 수 있는 경우에 대해 기억된다.

마이 리듀서("비즈"는 나의 아이템 목록이고, 나는 불변성을 사용한다.항목을 저장할 목록)

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-Redex를 사용하여 저장소를 관찰 가능으로 설정):

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

보시다시피, 나는 실제 Redex 발송을 하기 위해 액션(BizzActions)을 사용하고 있다.네 부품으로 할 수 있지만 난 이런 것들을 분리하는 게 더 좋아좋은 방법을 위해, 여기 내 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
            }
        });
    };

}

Redex 스토어와 Ract 구성 요소를 @connect할 때 데이터를 정렬할 수 있다.

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

Redex 문서에는 Todo 예제의 유사한 사례가 나와 있다. https://redux.js.org/basics/usage-with-react

나는 섹션 사전 패턴을 사용해서 환원기를 분류해 왔다.즉, 머리글별로 항목을 정렬하고 날짜를 말한 다음 날짜 키별로 객체를 배열하여 저장한다.

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

ListView는 이 객체 형식을 제외하고 항목을 섹션으로 렌더링하기 때문에 React Native에서 이 명령을 사용하여 ListView를 채운다.cloneWithRowsAndSections방법의

이것은 나의 분류가 사소한 것이 아니기 때문에 성능 최적화다.나는 깊은 비교를 해야 하는데, 이렇게 하면 내가 처음 상점을 가득 채울 때 한 번만 하고, 그 장면을 연출할 때마다 하지 않는다.

나는 또한 ID로 사전을 사용하고, 실제 사물 대신 정렬된 받아쓰기에 ID만 저장하는 것으로 장난을 친 적이 있다.

업데이트가 더 복잡하고 섹션에서 항목을 제거할 경우 섹션 헤더를 제거할 시기를 결정해야 한다는 점에서 이에 대한 절충이 있다.

참조URL: https://stackoverflow.com/questions/34475367/where-should-i-handle-sorting-in-redux-app