동일한 페이지/루트에 동일한 재사용 가능한 레덕스 반응 컴포넌트의 여러 인스턴스가 있는 경우

동일한 페이지/루트에 동일한 재사용 가능한 레덕스 반응 컴포넌트의 여러 인스턴스가 있는 경우

대규모 프런트 엔드 애플리케이션을 만들고 있습니다.

React-Redux를 사용하고 있습니다.

재사용 가능한 컴포넌트를 만들고 있습니다.

이 질문은 동일한 페이지/경로에 동일한 재사용 가능한 Redux 컴포넌트의 여러 인스턴스가 반응하는 것에 관한 것입니다.

문제 상세:

Sectionheader상태에 수 .환원 상태가 될 수밖에 없습니다.

속성 (reducer)를 .SectionheaderReducer.

2개의 Sectionheader페이지에는, 같은 스토어 상태 표시에 바인드 되어 있는 것과 같은 값이 표시되는 경향이 있습니다.

리덕스 기반의 재사용 가능한 반응 컴포넌트를 구성 가능하게 하는 방법은 무엇입니까?각가 리듀서용 수 .SectionheaderReducer

인스턴스 네임스페이스를 구현할 필요가 있습니다.이것은 컴포넌트와 리듀서를 구별하기 위한 키를 건네주는 것만큼이나 기본적인 것입니다.

.ownProps 안에서mapStateToProps을

const mapStateToProps = (state, ownProps) {
    let myState = state[ownProps.namespace]
    return {
        myState.value
    }
}

도 같은 방법으로 할 수 .mapDispatchToProps

const mapDispatchToProps = (dispatch, ownProps) {
    return {
        myAction: (myParam) => dispatch(myAction(ownProps.namespace, myParam))
    }
}

작업 유형에 네임스페이스를 사용하는 것만 기억해 두면, 감소하는 것이 귀찮아지지 않습니다.

const myAction => (namespace, myParam) {
    return { type: `${namespace}/${MY_TYPE_CONSTANT}`, myParam }
}

그리고 리듀서에도 이름을 붙이도록 해

const myReducer = (namespace) => (state = initialState, action) => {
    switch(action.type) {
        case `${namespace}/${MY_TYPE_CONSTANT}`:
            return { ...state, action.myParam }
        default:
            return state
    {
}

이제 리듀서를 조합할 때 이름이 붙은 2개의 리듀서를 추가합니다.

combineReducers({
    myInstance1 : myReducer('myInstance1')
    myInstance2 : myReducer('myInstance2')
}

마지막으로 네임스페이스를 각 인스턴스에 전달합니다.

render() {
    return (
        <div>
            <MyComponent namespace='myInstance1' />
            <MyComponent namespace='myInstance2' />
        </div>
    )
}

면책사항:저는 다음 도서관의 주요 기고자입니다.

redux-subspace는 여러 인스턴스를 포함하는 모든 컴포넌트에 대해 이 패턴을 재실장할 필요 없이 보다 고도의 네임스페이스 구현을 제공할 수 있습니다.

리듀서 작성은 위와 유사합니다.

const reducer = combineReducers({ 
    myInstance1: namespaced('myInstance1')(myReducer)
    myInstance2: namespaced('myInstance2')(myReducer)
})

★★★★★★★★★★★★★★★.SubspaceProvider는 각 할 수 .

render() {
    return (
        <div>
            <SubspaceProvider mapState={state => state.myInstance1} namespace='myInstance1'>
                <MyComponent />
            </SubspaceProvider>
            <SubspaceProvider mapState={state => state.myInstance2} namespace='myInstance2'>
                <MyComponent />
            </SubspaceProvider>
        </div>
    )
}

.mapStateToProps합니다.

const mapStateToProps = (state) {
    return {
        state.value
    }
}

중첩을 줄이려면 고차 구성 요소도 있습니다.

실제로 네임스페이스를 사용하여 작업 이름을 변경하지 않고 다른 방식으로 구현했습니다.

했습니다.meta-dataFSA이나 줄임말을 mapStateToProps★★★★★★ 。

,, 음, 음, 음, 다, 다, 다, 다, 다, also, also, also, also, also, also, alsoredux-thunk.

사용하기 쉬울 것 같은데...환원제

나는 그 질문을 다음과 같이 해석했다.

• 스토어에 콘텐츠 데이터(예: 섹션 및 제목)가 있습니다.
• 데이터의 비트를 그리기 위한 구성 요소(예:<SectionHeader />)
• 페이지에 두 개 이상의 섹션을 표시하지만 현재 모든 헤더의 텍스트는 동일합니다.

가능한 해결책 중 하나는 매장에 "섹션" 아이디어를 추가하는 것입니다.데이터의 컨텐츠 구조를 관리하는 리듀서를 작성합니다.예: 한 번에 스토어 상태는 다음과 같습니다.

{ 
  sections: {
     0: {
        header: 'My section title',
        content: 'Whatever your content is'
     },
     1: {
        header: 'My other section title',
        content: 'Loads of lovely writing or hrefs to images or whatever'
     }
  }
}

```

그러면 특정 페이지에서 섹션 2와 섹션 4를 사용할지 "알 수 있는 컨테이너 구성요소" 또는 "레이아웃 구성요소" 또는 "스마트 구성요소"가 생성됩니다.이걸 어떻게 아느냐는 너한테 달렸어.인덱스를 하드 코딩(항상 같기 때문에)하거나 필터링 규칙을 사용하거나 스토어에 다른 필드를 사용하여 선택 항목을 정의할 수 있습니다.기타.

그런 다음 컨테이너 구성요소는 다음과 같이 선택된 제목을 "덤"으로 전달합니다.

<SectionHeader>{sections[2].header}</SectionHeader>

또는

<SectionHeader title={sections[2].header} />

복잡한 일 없이 쉽게 재사용할 수 있도록 당사의 컴포넌트를 멍청한(스테이트리스) 컴포넌트로 변환합니다.

언급URL : https://stackoverflow.com/questions/42906358/having-multiple-instance-of-same-reusable-redux-react-components-on-the-same-pag