2017-01-05 8 views
0

내 반응 양식 구성 요소의 formSubmit 부분을 리디렉션`_id`을 반환받을하기 위해 다음과 같습니다 :POST 요청 - 방법이

handleFormSubmission = (e) => { 
    if (e) e.preventDefault() 
    const { showErrors, validationErrors, ...formData } = this.state 
    const { submitForm, router } = this.props 
    const errors = run(formData, fieldValidations) 

    let newState = update(this.state, { 
    validationErrors: { $set: errors } 
    }) 

    this.setState(newState,() => { 
    if (isEmpty(this.state.validationErrors)) { 
    // submitForm is an dispatches a redux action 
    submitForm(formData) 

    if (formData._id) { 
     // the below is good on a PUT request 
     router.push(`/accounts/lodgedocket/${formData._id}`) 
    } else router.push(`/accounts/lodge`) 
    // with the else above I have no _id to redirect to 
    } else this.matterno.focus() 
}) 

submitForm는이 다음 REDUX 액션을 전달하다 REDUX-사가

const { payload } = yield take(constants.SUBMIT_LODGE_FORM) 

에 의해 take, n은 문제는 내가 POST 요청이 성공적으로 완료 한 후 새로운 _id에 픽업하는 방법을 알고하지 않는 것이 다음이다. url 리디렉션이 작업 파일이나 구성 요소에서 수행되어야합니까?

어쩌면 나는 행동에서 URL을 push해야 할 수도 있습니다. 그러나 나는 이것도 이해할 수 없습니다.

나는 reactjs, redux, react-redux 및 react-redux-router를 사용하고 있습니다.

감사합니다.

답변

1

더 많은 코드를 추가해야합니다. 어쨌든 그것은 정말로 관용적 인 희생자처럼 보이지 않습니다.

Ajax 호출을 수행하는 경우 redux-thunk와 같은 미들웨어가 있어야합니다. Ajax 콜백에 조치를 전달합니다. 이 작업에는 서버 응답이 포함되며 감속기가 처리합니다. 당신은 id를 가진 새로운 상태를 얻을 것이고, 따라서 새로운 컴포넌트 렌더가 소품에서 그것을 얻을 것입니다.

UPDATE :

당신이 REDUX-사가 미들웨어를 사용하고 있기 때문에, 당신은 단순히 사가 아약스 콜백의 반응-라우터 REDUX 행동 작성자에 대한 호출을 실행할 수 있습니다. 여기 문서는 : https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions

문제가 정말 URL을 변경하는 작업을 파견하는 곳에서했다 라우터 미들웨어

import { browserHistory } from 'react-router' 
const middleware = routerMiddleware(browserHistory) 
+0

덕분에 여러분의 의견을. xhr 요청은 redux-saga를 통해 전송됩니다. 내가 알 수없는 반환 된 새 _id와 함께 리디렉션 할 위치입니다. – Joe

+0

redux 라우터 조치를 SUBMIT_LODGE_FORM 페이로드에 전달하고 Ajax 호출 응답 후 saga에서 디스패치 할 수 있습니다. –

+1

또는 무용담에서 직접 푸시 (가있는 경로)를 발송하십시오. –

0

동안 반응 라우터에서 browserHistory를 가져올해야합니다. 대답은 다음 조르지오 Bozio의 대답과에서 온 :

  1. https://github.com/redux-saga/redux-saga/issues/79#issuecomment-215665308 - URL을 변경할 수있는 세 가지 방법으로 서비스를 제공합니다.

  2. 특히, 나는

  3. import { push } from 'react-router-redux'을 사용하지만 미들웨어를 구성하는 방법에 문제가 있었고,이 링크는 나를 위해 그것을 해결 : https://github.com/reactjs/react-router-redux/issues/366#issuecomment-212044390