돌아 오는 : 조직 컨테이너, 구성 요소, 행동 및 감속기

Question

질문 :

큰 React/Redux 응용 프로그램 컨테이너, 구성 요소, 행동 및 감속기를 구성하는 대부분의 유지 보수 및 권장되는 가장 좋은 방법은 무엇입니까 ?

내 의견 :

현재 추세가 연결된 컨테이너 컴퍼넌트의 주위에 (... 액션, 감속기, 무용담) REDUX의 담보를 구성 할 것으로 보인다. 예 :

/src 
    /components 
     /... 
    /contianers 
     /BookList 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 
      index.js 
     /BookSingle 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 
      index.js   
    app.js 
    routes.js 

위대한 작품입니다! 이 디자인에는 몇 가지 문제가있는 것으로 보입니다.

이슈 1 :

우리가 안티 패턴을 보인다 다른 컨테이너에서 actions, selectors 또는 sagas에 접근 할 필요가. 감속기/상태가있는 글로벌 /App 컨테이너가 카테고리 및 열거 형과 같이 전체 앱에서 사용하는 정보를 저장한다고 가정 해 보겠습니다. 상태 트리, 위의 예에 이어 :

{ 
    app: { 
     taxonomies: { 
      genres: [genre, genre, genre], 
      year: [year, year, year], 
      subject: [subject,subject,subject], 
     } 
    } 
    books: { 
     entities: { 
      books: [book, book, book, book], 
      chapters: [chapter, chapter, chapter], 
      authors: [author,author,author], 
     } 
    }, 
    book: { 
     entities: { 
      book: book, 
      chapters: [chapter, chapter, chapter], 
      author: author, 
     } 
    }, 
} 

우리는 (분명히 잘못?) 우리는 하나 /BookList/selectors.js에서 다시 작성해야하는 우리의 /BookList 용기 내에서 /App 컨테이너에서 selector를 사용하거나 가져 오려면 /App/selectors (항상 똑같은 선택기가됩니까? 아니오). 이 appraoches는 모두 나에게 최적이 아닌 것 같습니다.

이 사용 사례의 대표적인 예로는 VERY 일반적인 "부작용"모델 인 인증 (인증 ...)이 있습니다. 앱 전체에 서가, 액션 및 선택기에 /Auth에 액세스해야하는 경우가 있습니다. 우리는 컨테이너가있을 수 있습니다 /PasswordRecover, /PasswordReset, /Login, /Signup .... 실제로 우리의 응용 프로그램에서 우리의 /Auth contianer 전혀 실제 구성 요소가있다!

/src 
    /contianers 
     /Auth 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 

위에서 언급 한 여러 가지 종종 관련없는 인증 컨테이너에 대한 모든 Redux 보조 자료를 포함하기 만하면됩니다.

Answer 1

저는 개인적으로 ducks-modular-redux 제안서를 사용합니다.

"공식적인"권장 방법은 아니지만 나에게 잘 맞습니다. 각 "오리"는 actionTypes.js, actionCreators.js, reducers.js, sagas.js 및 selectors.js 개의 파일을 포함합니다. 순환 종속성을 피하기 위해이 파일에서 다른 오리에 대한 종속성이 없거나 각각의 "오리"에는 관리해야하는 논리 만 포함됩니다. duck circle.

components/ 폴더

containers/ 폴더 컨테이너에서 생성 포함 내 응용 프로그램의 모든 순수한 구성 요소가 포함

그런 다음, 루트에 나는 components과 containers 폴더와 일부 루트 파일이 순수한 구성 요소. 컨테이너에 많은 "오리"가 포함 된 특정 selector이 필요한 경우이 특정 컨테이너와 관련되어 있기 때문에 <Container/> 구성 요소를 작성한 동일한 파일에 내용을 씁니다. selector이 여러 컨테이너에 공유되는 경우 개별 파일 (또는 이러한 소품을 제공하는 HoC)에서 만듭니다.

rootReducers.js는 :

/* let's consider this state shape 

state = { 
    books: { 
     items: { // id ordered book items 
      ... 
     } 
    }, 
    taxonomies: { 
     items: { // id ordered taxonomy items 
      ... 
     } 
    } 
} 

*/ 
export const getBooksRoot = (state) => state.books 

export const getTaxonomiesRoot = (state) => state.taxonomies 

: 단순히 당신이 뭔가를 할 수 귀하의 경우 예를 들어,

rootSelectors.js 상태의 각 조각의 루트 선택을 노출하는 모든 감속기를 결합하여 루트 감속기를 노출

각 오리 안에서 selectors.js 파일의 상태 모양을 "숨길"수 있습니다. 각 selector은 오리 내부에서 전체 상태를 수신하므로 파일 selector.js에 해당하는 rootSelector을 가져와야합니다.

rootSagas.js는 및 많은 "오리"를 포함하는 복잡한 흐름을 관리하여 오리 내부의 모든 무용담을 구성한다.

귀하의 경우 그래서

, 구조가 될 수있다 : 내 "오리"충분히 작은 경우

components/ 
containers/ 
ducks/ 
    Books/ 
     actionTypes.js 
     actionCreators.js 
     reducers.js 
     selectors.js 
     sagas.js 
    Taxonomies/ 
     actionTypes.js 
     actionCreators.js 
     reducers.js 
     selectors.js 
     sagas.js 
rootSelectors.js 
rootReducers.js 
rootSagas.js 

, 나는 종종 폴더 생성을 건너 뛰고 직접 모든 5 개 개의 파일이있는 ducks/Books.js 또는 ducks/Taxonomies.js 파일을 작성 (actionTypes.js, actionCreators.js, reducers.js, selectors.js, sagas.js)이 병합되었습니다.