반응 redux를 사용하는 많은 CRUD 코딩 스타일

Question

나는 react redux를 사용하여 CRUD가 많은 대시 보드 앱을 구축하고 있으므로 데이터베이스의 각 컬렉션마다 자체 페이지가 있습니다.

문제는 그들 각각 I 액션, 감속기, 일정한 파일과 그들 각각의 인출처럼 fetchSuccess, fetchError, 삽입, insertSuccess는, insertError는, removeSuccess, removeError를 제거 유사한 작업을해야합니다을 만들 것입니다 , clearInsertError, clearRemoveError. 올바른 방법인가요? 다른 파일에 상수를 반복적으로 써야하기 때문에 실제로는 효율적이지 않다고 느낀다.

Answer 1

일반적인 접근법은 하나의 collections 감속기를 사용하고 컬렉션 이름을 인수로 사용하는 작업 (예 : GET_COLLECTION) 열쇠로서의 이름으로 컬렉션. 그런 다음 상수를 하나의 파일로 축소 할 수 있습니다.이 파일은 콜렉션을 문자열 (예 : 엔드 포인트 URL의 서브 루틴)로 나열합니다.

예를 들어, 우리는 각각 /api/cars/과 /api/tyres/에서 사용할 수있는 Cars 개체 및 컬렉션 모음이 있다고 가정합니다. 우리는 모든 차를 가져 오기 할 수 있습니다

const state = { 
    collections: { 
     CARS: [/*list of cars*/], 
     TYRES: [/*list of tyres*/], 
    } 
} 

: 당신은 전체 컬렉션 감속기 같은 것을 보일 수 있습니다 상태로 저장하면 다음 CARS = 'cars/' 및 TYRES = 'tyres/', 그리고이 노선에 대한 상수를 정의 할 수 있습니다 우리가 getCollection(CARS) 같은 것을 사용할 수 있으며, 감속기가 state.collections[CARS]에 결과를 저장해야합니다.

편집 :에 대한 응답 - 아마도 response 및 items -

를 응답 상태를 저장하는 것이 아니라 각 수집을 저장하는 배열 (또는 목록)을 사용하여, 대신 두 개의 키를 가진 개체를 사용할 수 있습니다. response 개체는 컬렉션을 가져 오는 데 사용되는 것과 동일한 동작으로 업데이트해야합니다. 요청을 보내면 '보류 중'으로 설정하고 성공한 응답을 받으면 '성공'또는 성공한 응답을 받으면 '성공'또는 요청이 실패합니다. 요청이 실패하면 오류를 저장할 장소가됩니다.

또 다른 일반적인 패턴은 위에서 설명한 것처럼 감속기 구조를 유지하고 응답 상태에 대해 별도의 감속기를 만드는 것입니다. 다시 말하지만, 이는 콜렉션 감속기와 동일한 액션에 응답하고 각 콜렉션에 대한 응답 상태를 오브젝트에 저장합니다. 여기서 오브젝트 및 요청에 대한 정보를 유지할 수 있습니다.