मेरे पास एक एक्शन/रेड्यूसर/घटक हैं। मेरे घटकों में से एक (घटक डंप) में मेरे पास एक चयन है। मुझे जानकारी मिलती है कि किस प्रकार का फ़िल्टर मेरा स्टोर है। मैं इसे क्रिया, या reducer में कहां संभाल सकता हूँ?मुझे रेडक्स ऐप में सॉर्टिंग को कहां संभालना चाहिए?
मैं आइटम को बचाने:
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 प्रलेखन तोदो उदाहरण में एक ऐसी ही मामले से पता चलता , Redux Store में sortKey और sortKind (asc/desc)।
मेरे कोणीय घटक में (मुझे विश्वास है कि रिएक्ट के लिए समान होगा), मुझे स्टोर स्टेटस को एक अवलोकन के रूप में मिलता है ताकि मैं यूएक्स में आइटम, सॉर्टकी और सॉर्ट ऑर्डर प्रदर्शित कर सकूं।
तालिका स्तंभ पर उपयोगकर्ता क्लिक तरह कुंजी (आदेश) को बदलने के लिए जब मैं नई चाबी/सॉर्ट क्रम राज्य के लिए कम करने के लिए प्रेषण।
कम करने फिर नए छंटाई करता है, और अद्यतन मूल्यों के साथ नए राज्य देता है।
घटक में नमूदार इस प्रकार एक घटना है जो UX अद्यतन करता स्पार्क्स।
लाभ:
राज्य में sortKey और sortKind सहेजकर घटक
से बाहर तर्क छँटाई रखने के लिए, आप ठीक UX बहाल उपयोगकर्ता ब्राउज़र ताज़ा करता है, तो कर सकते हैं (मैं का उपयोग करें Redux-LocalStorage सिंक करने के लिए)
दुकान के रूप में क्रमबद्ध आइटम नहीं है, आप केवल छँटाई जब तक उपयोगकर्ता यह चाहता प्रदर्शन करेंगे।
क्रमबद्ध आइटम जब उपयोगकर्ता घटक पर लौट सकता है के लिए याद किया जाता है।
मेरे कम करने ("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);
}
}
आप देख सकते हैं, मैं एक क्रिया (बुलाया BizzActions) का उपयोग कर रहा वास्तविक Redux प्रेषण करने के लिए। आप इसे अपने घटक में कर सकते हैं, लेकिन मैं इन चीजों को अलग करना पसंद करता हूं।
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
}
});
};
}
आप डेटा को सॉर्ट सकता है जब @connect Redux दुकान के साथ अपनी प्रतिक्रिया घटक आईएनजी: http://rackt.org/redux/docs/basics/UsageWithReact.html
मैं एक खंड शब्दकोश पद्धति का उपयोग कर मेरी reducers छँटाई किया गया है: अच्छा उपाय के लिए, यहाँ मेरी BizzActions (एक सेवा) है। दूसरे शब्दों में, मैं हैडर के आधार पर मेरे आइटम को सॉर्ट, एक तिथि का कहना है, और उसके बाद की तारीख कुंजी द्वारा सरणियों में वस्तुओं की दुकान: मेरे ListView पॉप्युलेट करने के लिए मूल निवासी प्रतिक्रिया में क्योंकि ListView सिवाय जाएगा
sectionHeaders: ["Monday", "Tuesday"],
dict:{
Monday: [{obj1},{obj2},{obj3}],
Tuesday: [{obj4}],
}
तब मैं इस dict का उपयोग cloneWithRowsAndSections विधि का उपयोग करके अनुभागों के साथ आइटम प्रस्तुत करने के लिए यह ऑब्जेक्ट प्रारूप।
यह एक प्रदर्शन अनुकूलन है क्योंकि मेरी सॉर्टिंग तुच्छ नहीं है। मुझे गहरी तुलना करना है और इस तरह मैं केवल एक बार ऐसा करता हूं जब मैं पहली बार स्टोर को पॉप्युलेट करता हूं, और हर बार जब मैं दृश्य प्रस्तुत करता हूं।
मैंने आईडी द्वारा एक शब्दकोश का उपयोग करने और वास्तविक वस्तुओं की बजाय सॉर्ट किए गए dict में केवल आईडी संग्रहीत करने के साथ भी खेला है।
इसके लिए व्यापार बंद हैं हालांकि, उस अद्यतन में अधिक जटिल है और आपको यह तय करना होगा कि अनुभाग से किसी आइटम को हटा दिए जाने पर सेक्शन हेडर को कब निकालना है।
आईएमओ, डेटा सॉर्ट करने का सही स्थान सीधे reducers में नहीं है, लेकिन चयनकर्ता में।
redux डॉक्स से:
फिर से चुनें memoized, composable चयनकर्ता कार्यों बनाने के लिए एक सरल पुस्तकालय है। चयनकर्ताओं को अचयनित करने के लिए रेडक्स स्टोर से व्युत्पन्न डेटा की कुशलतापूर्वक गणना करने के लिए उपयोग किया जा सकता है।
मैं वर्तमान में डेटा फ़िल्टर और सॉर्ट करने के लिए चयनकर्ताओं का उपयोग कर रहा हूं।
हां, चयनकर्ता निश्चित रूप से एक सुरुचिपूर्ण समाधान हैं – tech4242
यह आसान और साफ समाधान है, लेकिन यह ** ** ** प्रत्येक ** राज्य परिवर्तन पर निष्पादित किया जाएगा: \ – Denis
आप राज्य के तर्कों को वास्तव में बदलते समय केवल चयनकर्ता परिणाम को दोबारा जोड़कर हर राज्य परिवर्तन पर छंटनी से बच सकते हैं। वहां कुछ पुस्तकालय हैं जो ऐसा कर सकते हैं, और जब तक आप रेडक्स का सही उपयोग कर रहे हैं (यानी आपके रेड्यूसर शुद्ध हैं) स्वयं को लिखना बहुत आसान है। [Reselect] पर एक नज़र डालें (https://github.com/reactjs/reselect#q-are-there-typescript-typings)। –