어떻게 반응 - redux와 소품에 redux 저장소에 캡슐화 된 UI 상태를 매핑 할 수 있습니까?

Question

위젯 위젯 감속기를 작성하고 렌더 트리를 직렬로 반응시키는 방법을 알아 내는데 어려움을 겪고 있습니다. 결과적으로 반응 감속기를 사용하여 렌더러의 감속기를 렌더 트리의 소품에 매핑 할 수 있습니다.

이와 같은 설정을 가정 해보십시오. ====

NameView.jsx: 
... 
render() { 
    return <div> Name: {this.props.name} </div>; 
} 
... 

====

NameAction.js: 
... 
export const CHANGE_NAME = 'CHANGE_NAME'; 
... 
export function changeNameAction(newName) { 
    return { 
    type: CHANGE_NAME, 
    payload: newName, 
    }; 
} 

====

NameReducer.js: 

import { CHANGE_NAME } from './NameAction'; 

function ui(state = {name: ''}, action) { 
    switch(action.type) { 
    case(CHANGE_NAME): 
     return Object.assign({}, state, {name: action.payload}); 
     break; 
    default: 
     return state; 
    } 
} 

export default ui; 

를 : 나는 어떤 응용 프로그램에서 어디서나 사용할 수있는 NameWidget를 만들기 위해 노력하고있어

NameWidget.js: 

import { connect } from 'react-redux'; 
import { NameView } from './NameView'; 

const mapStateToProps = (state) => { 
    return { 
    name: state.name, 
    }; 
}; 

const NameWidget = connect(
    mapStateToProps 
)(NameView); 

export default NameWidget; 

직접 NameWidget을 사용하는 경우 probl em :

NameApp.jsx: 

import { createStore } from 'redux'; 
import app from './NameReducers'; 
let store = createStore(app); 
... 
function render() { 
    return (
    <Provider store={store}> 
     <NameWidget/> 
    </Provider> 
); 
} 

그러나이 모듈러를 만드는 방법은 없습니다. 나는이 위젯을 다른 어떤 것으로도 넣을 수 없다. 나는이하고 싶어한다고 가정

EncapsulatingView.jsx: 
... 
render() { 
    return (
    <div> 
     <NameWidget/> 
     <SomeOtherReduxWidget/> 
    </div> 
); 
} 
... 

====을

EncapsulatingReducer.js: 
import { combineReducers } from 'redux' 
import nameWidget from '../name/NameReducer'; 
import someOtherWidget from '../someOther/SomeOtherReduxWidgetReducer'; 

export default combineReducers({nameWidget, someOtherWidget}); 

(I 포함한 나머지 코드 (연결) 및 캡슐화에 대한 createStore는() * 분명 기대합니다.)

이 거의은 모든 캡슐화 된보기의 모든 작업이 고유 한 유형을 가지고있는 한 작동합니다. 하지만 문제는 NameWidget의 mapStateToProps입니다. 조상의 combineReducers()가 자신의 적 - 웅대 한 슈퍼 위젯과 애플리케이션을 정의하는 방법을 어떻게 든에 따라 자손을 -

... 
const mapStateToProps = (state) => { 
    return { 
    name: state.nameWidget.name, 
    }; 
}; 
... 

등등 : 그것은 가게의 섹션에 새 경로를 사용 위에서 변경해야 보정하기 위해 mapStateToProps()를 변경해야합니다. 이렇게하면 코드의 캡슐화와 재사용이 중단되고 반응을 줄이는 방법으로 코드를 처리하는 방법을 알 수 없습니다. combineReducers()를 작성하여 위젯을 정의한 다음 결과 저장소를 해당 위치의 소품으로 매핑하는 방법은 어디에서나 쓸 수 있습니다.

(아무 것도 제시하지 않고 반복 된 combineReducers()가 아래쪽 모양을 생성하지만 mapStateToProps()가 그 모양을 검색하기 위해 하향식 "절대 경로"접근 방식을 사용하는 것으로 보입니다.)

Answer 1

흥미로운 질문입니다. 부모님에 의해 guid가 생성되고 소품을 통해 전달되도록 사용자의 목적에 부합하는지 궁금하다면 위젯의 해당 인스턴스에 대한 상태 객체의 인덱스로 간단히 사용하십시오. 따라서이 위젯의 ​​새로운 인스턴스를 만들 때마다 상위에 ID를 생성 한 다음이를 소품으로 전달해야하며 connect 메소드에서 mapStateToProps 및 mapDispatchToProps 둘 다에서 사용할 수 있습니다. . 나는 이론 상으로는이 부모 컴포넌트를 직접 만들 수도 있고 사용 중일 때 투명 할 수도 있고 componentDidMount를 사용하여 컴포넌트 상태로 저장하고 자식에게 전달할 새로운 GUID를 생성하기 만하면된다.

Answer 2

John은 mapStateToProps()의 ownProps 함수 arg를 통해 저장소 "라우팅"로직을 전달하면서 그에 대한 올바른 매직을 제공했기 때문에 John에게이 질문에 대한 기여도를 보냈습니다. 그러나 나는 그것에 대한 내 자신의 회전을 선호.

EncapsulatingView.js: 

... 
render() { 
    const uiStorePathBase = ((this.props.uiStorePath &&   
     this.props.uiStorePath.length) ? 
    this.props.uiStorePath + '.' : 
    '' 
); 
    return (
    <div> 
     <NameWidget uiStorePath={uiStorePathBase+"nameWidget"}/> 
     <SomeOtherWidget uiStorePath={uiStorePathBase+"someOtherWidget"/> 
    </div> 
); 
} 
...