컨텍스트가 Redex connect()를 통해 전달되지 않음

컨텍스트가 Redex connect()를 통해 전달되지 않음

편집: 설정의 Redex 문제 해결 제안으로 컨텍스트 변경 시 연결된 Child 업데이트를 할 수 있었다.{ pure: false }그러나 나는 이것을 내가 업데이트하고 싶은 Child의 부모인 연결된 모든 구성요소에 추가해야 했다.많은 구성 요소에 이렇게 해야 한다는 것이 이상하고 비효율적으로 보인다.

---

우선 내가 원하는 최종 결과가 무엇인지를 설명한 후에 내가 생각하는 문제점에 대해 생각해 볼 것이다.

나는 나의 Route 구성요소의 손주 구성요소 내에서 반응 라우터의 매개 변수에 액세스하고 싶다.「기록·지속·재생·시간여행 이용」을 사용하고 있지 않으면, 현재 루트를 스토어와 동기화할 필요가 없다는 참조가 여러 개 있어, 지금까지 피했다.Dan Abramov는 여기서 그들을 동기화되지 않은 상태로 유지하고 단지 그 경로를 진실의 근원으로 사용하는 것은 괜찮다고 말한다.

내 문제에 대한 답이 없었던 유사한 질문: https://stackoverflow.com/a/36633892/2300773
연결() 기반 시나리오에서 작동하지 않는 <제공자>와의 컨텍스트를 통해 스토어 전달

react-router는 컨텍스트로서 현재 파라미터를 제공하지 않기 때문에, 나는 Route 구성 요소로부터 컨텍스트로서 현재 파라미터를 추가하기로 선택했다.connect()를 사용하여 설정한 Child(차일드)에 도달할 때까지 구성 요소 트리에서 컨텍스트에 액세스할 수 있다.페이지의 초기 렌더링은 Child에게 올바른 컨텍스트를 제공한다.그러나 컨텍스트가 변경되면 Child는 업데이트되지 않는다.connectus는 컨텍스트 링크를 잘라내고 있는 것으로 보인다.

이것이 연결()의 바람직한 동작인가?만일 그렇다면 구성 요소가 스토어에 동기화되지 않고 어떻게 경로 매개 변수에 접근해야 하는가?

다음은 "연결된" 구성요소를 지나 컨텍스트가 업데이트되지 않는 매우 최소한의 시나리오를 보여주는 JSFiddle이다.

다음은 라우터 구성 요소에서 컨텍스트로 현재 경로 파라미터를 보내는 실제 코드의 일부입니다(/view/:viewSlug). 구성 요소를 다음으로 설정하려고 시도했다.{ pure: false }Redex 문제 해결에서 설명한 대로 연결되지만 운이 따르지 않았다.

상위(앱) 구성 요소

class App extends Component {
  getChildContext() {
    const { viewSlug } = this.props

    return { viewSlug }
  }

  ...
}

App.PropTypes = {
  ...
}

App.childContextTypes = {
  viewSlug: PropTypes.string
}

...

export default connect(mapStateToProps)(App)

손주(일) 컨테이너

import Day from '../components/Day'

const mapStateToProps = (state, ownProps) => {
  ...
}

export default connect(mapStateToProps)(Day)

손주(일) 구성 요소

class Day extends Component {
  ...
}

Day.PropTypes = {
  ...
}

Day.contextTypes = {
  viewSlug: PropTypes.string.isRequired
}

export default Day

댄 아브라모프와 빠른 논의를 한 결과, 여러 가지 깊은 구성 요소에 패러마를 전할 수 있는 좋은 방법이 없는 것 같다.(여기서 토론)일단 Ract Router 3.0이 출시되면, 이것은 정확하게 구현하기에는 매우 사소한 일일 것이다.

해결 방법

현재 내가 발견한 유일한 해결책은 Child Component와 Route Component 사이의 Chenese Component뿐만 아니라 Child Component를 "순수하지 않은" 구성요소로 설정하는 것이었다.

connect() 함수를 사용할 때는 options parameter로 할 수 있다.

export default connect(mapStateToProps, null, null, { pure: false })(MyComponent)

이 정보는 Redex 문제 해결 페이지에서 확인됨

나도 같은 문제가 있다.내 앱의 모든 구성 요소에서 컨텍스트로 저장하고 사용하는 경로 경로에 언어 매개 변수가 있다.그리고 환원 저장소를 연결하면 컨텍스트 속성이 더 이상 업데이트되지 않는다.

당신이 말한 바와 같이, 다음과 같은 것이 있다.{ pure: false }필요 이상으로 구성 요소를 교체하도록 강제하는 주장

컨텍스트를 사용하지 않는 또 다른 해결책.react-router-remedx를 사용하여 Redex 저장소에 변경된 URL을 저장하고 업데이트할 수 있다.페이로드 객체가 있는 LOCATION_CHANGE 자체 동작이 있다.

routing: {
    locationBeforeTransitions: {
        pathname: 'view/someView',
        search: '',
        …
    }
}

지금은 파람이 없지만, 파싱은 할 수 있다.pathname옛 학교 레그스프 방식으로 데려오도록 해:)

그리고 이 이슈를 읽어 보십시오. 다른 해결책도 있습니다 https://github.com/facebook/react/issues/2517

업데이트:

다른 방법이 있다. 앱 상태를 Redex 저장소에 저장:

…
import { setCurLang } from '../actions/langActions';

const App = React.createClass({
    componentWillMount(){
        this.props.actions.setCurLang(this.props.params.curLang);
    },
    shouldComponentUpdate: function(nextProps) {
        return nextProps.params.curLang !== this.props.params.curLang;
    },
    componentWillUpdate(nextProps) {
        this.props.actions.setCurLang(nextProps.params.curLang);
    },
    render() {
        return (
            <div>
                {/* here you can use your saved URL-param as prop,
                    and it will be updated each time react router changes */}
                {this.props.curLang}
            </div>
        )
    }
});
function mapStateToProps(state) {
    return {
        curLang: state.curLang
    }
}
function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators( { setCurLang }, dispatch)
    }
}
export default connect(null, mapDispatchToProps)(App);

내 환원기(이것은 간단하다, 물론 당신은 사용할 수 있다.combineReducers여기:

const curLang = 'de';

export default function reducer(state = curLang, action) {
    switch (action.type){
        case 'SET_CUR_LANG':
            return { ...state, cur: action.curLang }
        default:
            return state;
    }
}

및 조치:

export function setCurLang(curLang) {
    return {
        type: 'SET_CUR_LANG',
        curLang: curLang
    }
}

우리가 받지 못하는 이유this.contextreact-remensx connect connect를 사용할 때 지정하지 않은 경우contextTypes이 코멘트를 확인하다

다음과 같이 추가:

import PropTypes from 'prop-types';

Myapp.contextTypes = { store: PropTypes.object };

이제, 우리는 그것을 찾을 수 있다.this.context값어치가 있고 상점은 다음에 있다.this.context.store

자세한 그림을 보려면 이 설명도 확인하십시오.

참조URL: https://stackoverflow.com/questions/37123203/context-not-being-passed-through-redux-connect