Redux & React Router : 디스패치 및 내비게이션 사용하기 (history.push)

Question

React Router의 history.push('/route')을 Redux과 함께 사용하는 방법에 대해 조금 우둔합니다.

즉, Redux의 mapDispatchToProps으로 구성 요소를 연결하는 경우 특정 동작을 전달한 후 해고되어야하는 history.push('/route')을 어떻게 넣을 수 있습니까?

문제를 명확히하기 위해, 여기에

class PostContainer extends React.Component { 

    handleSubmit(data) { 
     return this.props.addPost(data); 
    } 

    render() { 
     return (<Post onSubmit={data=> this.handleSubmit(data)}/>); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return {  
     addPost: (data) => { 
      dispatch(addPost(data)).data.then((result) => { 
       dispatch(addPostFulfilled(result.data)); 

       //How do you call the following function? 
       this.props.history.push('/posts') 
      }).catch((error) => { 
       dispatch(addPostRejected()); 
      }); 
     },  
    } 
} 

export default connect(null, mapDispatchToProps)(PostContainer); 

당신이 즉시 게시물 addPostFulfilled을 통해 돌아 오는의 상태로 추가 될 때, 볼 수있는 페이지가 이동해야 ... 내 실험의 조각입니다 /posts via history.push.

Redux의 문서에 따르면 컨테이너는 상태를 업데이트하고 데이터를 가져 오는 데 사용됩니다. 따라서 바보 같은 구성 요소는 history.push과 같은 것을 넣지 않아야합니다.

위의 코드보다 나은 접근 방법은 무엇입니까?

모든 조언을 주시면 감사하겠습니다.

Answer 1

당신이 중 하나를 사용자가 반응-라우터 REDUX을 (초기 셋업이 필요)과 행동 제작자

import { push } from 'react-router-redux' 
    class PostContainer extends React.Component { 

    handleSubmit(data) { 
     return this.props.addPost(data); 
    } 

    render() { 
     return (
      <div> 
       <Post onSubmit={data=> this.handleSubmit(data)}/> 
      </div> 
     ); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return {  
     addPost: (data) => { 
      dispatch(addPost(data)).data.then((result) => { 
       dispatch(addPostFulfilled(result.data)); 

       //How do you call the following function? 
       dispatch(push('/posts')); 
      }).catch((error) => { 
       dispatch(addPostRejected()); 
      }); 
     },  
    } 
} 
export default connect(null, mapDispatchToProps)(PostContainer); 

아니면 그냥 "완료 콜백"와 같은 푸시을 통과에서 작업을 전달할 수 있습니다.

class PostContainer extends React.Component { 

    handleSubmit(data, done) { 
     return this.props.addPost(data, done); 
    } 

    render() { 
     const { push } = this.props.history; 
     return (
      <div> 
       <Post onSubmit={data=> this.handleSubmit(data, push)}/> 
      </div> 
     ); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return {  
     addPost: (data, done) => { 
      dispatch(addPost(data)).data.then((result) => { 
       dispatch(addPostFulfilled(result.data)); 

       //How do you call the following function? 
       done('/posts') 
      }).catch((error) => { 
       dispatch(addPostRejected()); 
      }); 
     },  
    } 
} 

export default connect(null, mapDispatchToProps)(PostContainer); 

Answer 2

IMHO, 당신은 당신의 바보 같은 구성 요소에서 history.push을 할 수있는 즉

const mapDispatchToProps = (dispatch) => { 
    return {  
     addPost: (data) => { 
      dispatch(addPost(data)).data.then((result) => { 
       dispatch(addPostFulfilled(result.data)); 
       <!-- removed from here --> 
      }).catch((error) => { 
       dispatch(addPostRejected()); 
      }); 
     },  
    } 
} 

당신의 addPostFulFilled 데이터가 당신이하고있는 옵션이 완료되면 귀하의 구성 요소 자체 this.history.push('/route'). props 업데이트시 호출되는 lifefcycle 메소드 중 하나를 수행 할 수 있습니다. 아마도, componentWillReceiveProps에 추가하십시오.

class PostContainer extends React.Component { 
    componentWillReceiveProps(nextProps){ 
    /*Added here*/ 
    if(nextProps.someFlag){ this.props.history.push('/someRoute'); 
}} 

참고

1. 당신은 store를 통해 위치 변화를 추적하지 확인합니다. (Read More) 당신은 react-router-4을 사용하는
2. 는 경우에 당신이 포장됩니다 위의 작품에만 당신의 withRouter에 연결하면 이력 객체가 PostContainer의 소품으로 표시됩니다.
3. shouldComponentUpdate에 불필요한 rerenders를 방지하고 필요한 로직을 작성하는 데주의해야합니다.

횡설수설 훨씬처럼 위의 소리, 당신은 항상 브라우저 기록에 새 항목을 밀어 수 react-router-redux의 push API와 함께 갈 수 있다면. 원하는 곳에서 가져 와서 새 경로를 푸시 할 수 있습니다.

세부 사항은 react-router-redux github pages 여기에 볼 수 있고, 문서를

모두 푸시을 인용하고 URL 또는 일반 문자열 URL을 설명하는 객체가 될 수있는 위치 기술자에 걸릴로 교체하십시오. 이러한 액션 생성자 은 하나의 단일 객체에서 routerActions로도 사용할 수 있습니다.은 Redux의 bindActionCreators()를 사용할 때 편리하게 사용할 수 있습니다. 당신의 PostContainer 구성 요소를 반응 내부

그래서 직접 mapDispatchToProps 내부 history.push()를 사용하거나 소품으로 전달할 사용할 수 있습니다.

---