아약스 요청에 대한 매개 변수를 저장할 위치

Question

많은 데이터 테이블이있는 응용 프로그램이 있습니다. 각 테이블에는 정렬 및 필터가 있습니다. API에 요청은 다음과 같습니다

axios.get('path/to/api/users', { params: { 
    sort: { 
    byField: 'name', 
    orderBy: 'DESK' 
    }, 
    filters: { 
    status: 'active', 
    country: 'spain' 
    }, 
    search: 'pablo' 
}}); 

그리고 내 상태의 구조는 다음과 같다 : A는 각 테이블에 대한 params 객체를 저장해야합니다

entities: { 
    users: { 
    byId: { 
     0: {}, 
     1: {}, 
    }, 
    allIds: [0, 1] 
    }, 
    posts: { 
    byId: { 
     0: {}, 
    }, 
    allIds: [0] 
    } 
} 

내가 질문이? 컨테이너 ( this.state) 또는 다른 감속기에? 또는 URL 쿼리 문자열?

Answer 1

나는 (부모 개체/감속기 아래) 저장소의 데이터와 함께 필터링/정렬/페이징 데이터를 확실히 유지합니다.

이 정보는 종종 표시됩니다. 현재 페이지, 정렬 순서, 필터 조건 등은 UI에 표시됩니다.

또한이 정보는 데이터 자체와 응집되어 변경됩니다. 더 많은 페이지를 가져 오면 마지막으로 가져온 페이지가 마지막 페이지 데이터와 함께 업데이트됩니다. 그것들을 하나로 묶는 것이 합리적입니다.

그러면이 데이터로 쿼리 문자열을 작성할 수 있습니다.

업데이트 : "감속기 구조를 개선하는 방법"

글쎄, 내가 말했듯이, 나는 부모 개체에 데이터와 메타 데이터를 함께 보관할 것입니다. 이런 일 :

const myReducer = (state = { 
    data: {...}, 
    metadata: { 
     paging: {...}, 
     sort: {...}, 
     filters: [], 
     search: '' 
    } 
}, action) => ... 

이 방법 함께 변경 데이터 및 메타 데이터 등의 구조 변화가 필요한 경우 그 구조는 독립적으로 변경할 수있다.

편집 : LRU 고려

는 N 버전을 유지하려는 경우, 당신은 불변 인 LRU 구현에 저장해야합니다. 당신이 하나를 찾을 (또는 할) 수 있다면, 여기 당신이 그것을 사용하는 것이 방법은 다음과 같습니다

이

const myReducer = (state = { 
    versions: new ImmutableLRU() 
}, action) => ... 

감속기 본체는 다음 그러나 그것은 사용되는 LRU에 객체 구조를 설정합니다.

return {...state, versions: versions.put(JSON.stringify(metadata), data)}; 

이 메타 데이터 속성의 값이 될하기 위해 LRU 키를 설정하고 그에 따라 캐시 된 결과를 찾아 볼 수 있습니다 : 같은 것을 할 수있다.

Answer 2

개인적으로 이것은 URL의 일부 여야한다고 생각합니다. 이렇게하면 각 주를 SEO에 적합한 고유 URL로 표시 할 수 있으며 공유하여 특정 필터/정렬에 직접 연결할 수 있습니다.

Answer 3

필자는 엔티티 감속기에 모든 엔티티를 함께 보관하고 지형지 물마다 별도의 감속기를 사용합니다. 엔티티, 사용자 및 게시물 등 3 개의 축소 기가 있습니다.당신은 기능에 따라 별도의 정렬/필터를해야합니다 가정 할 때, 나는 이런 식으로 뭔가를 구성 할 것 :

1) URL의 일부로 PARAMS 유지 :

entities: { 
    users: { 
    byId: { 
     0: {}, 
     1: {}, 
    } 
    }, 
    posts: { 
    byId: { 
     0: {}, 
    } 
    } 
} 

users: { 
    allIds: [0, 1], 
    sort: { 
    byField: 'name', 
    orderBy: 'DESK' 
    }, 
    filters: { 
    status: 'active', 
    country: 'spain' 
    }, 
    search: 'pablo' 
} 

posts: { 
    allIds: [0], 
    sort: { 
    byField: 'date', 
    orderBy: 'DATE' 
    } 
} 

Answer 4

내가 여기에 3 가지를 제안합니다. SEO에 도움이 될 특정 필터/정렬에 대한 고유 URL을 만듭니다.

2) 필터 및 정렬 변경시 업데이트 될 paramsReducer라는 감속기를 유지하십시오. params의 InitialState가 원하는 기본 상태 일 수 있습니다.

const paramsInitialState: { 
    sort: { 
    byField: 'name', 
    orderBy: 'DESK' 
    }, 
    filters: { 
    status: 'active', 
    country: 'spain' 
    }, 
    search: 'pablo' 
} 

export default function paramsReducer(state=paramsInitialState) { 
switch(action.type){ 
//case for update params 
} 
} 

3) 부모 구성 요소를 업데이트 할 때 params는 필요한 경우 다른 구성 요소에서 사용하도록 상태를 업데이트합니다.

은 또한 엔티티의 상태가 정상화 될 수있다 :

entities: { 
    users: { 
    0: {}, 
    1: {}, 
    }, 
    posts: { 
    0: {}, 
    } 
} 

사용자와 게시물 상태에서 키와 사용자에 따라 allIds 및 게시물을 저장할 필요가 없습니다. 응용 프로그램에서 사용하는 메모리가 줄어 듭니다. 응용 프로그램에서 allIds가 필요하면 컨테이너 수준에서 저장된 상태에서이 값을 파생시키는 것이 좋습니다.

참고로이 링크 Goomo.com을 참조하십시오. 여기서 필터, URL 및 상태를 사용하여 구현 된 정렬은 적용된 필터에서도 유지됩니다.