나는 redux-thunk최근에 사용 하고 있으며 다음과 같은 경우를 만납니다.
가입 작업 생성기 기능에서 history.push가입 성공 작업을 발송 한 후 수행하고 싶습니다 . 코드는 다음과 같습니다.
// SignupAction.js
export const signupRequest = (userData) => {
return dispatch => {
dispatch(signupPending())
return axios.post('/api/user', userData)
.then(res => dispatch(signupSuccess()))
.then(() => {
// wanna do history.push('/') to the home page after successfully signup
})
.catch(error => dispatch(signupFailure(error.message)))
}
}
지금은 혼란 스럽습니다. 모든 로직을 하나의 액션에 넣으려고하는데 history가입 액션에 삽입 할 방법이 없습니다 . 내가 줄 수있는 signupRequest이 될 수 함수에게 두 번째 인수를 history개체 자체를 : signupRequest(userData, history), 또는 난 그냥 콜백을 전달할 수 있습니다 signupRequest(userData, callback). 그러나 나는 어느 것이 더 나은지 잘 모르겠습니다.
역사를 얻을 수있는 다른 방법도있다 (가) 그래서, 하나의 행동에 모든 논리를 넣을 필요가 없습니다 signup action단지 약속을 반환하고, 나는이 접근,이 경우, 구성 요소에서 나중에 처리 할 history것 매우 간단합니다.
// signupAction.js
export const signupRequest = (userData) => {
return dispatch => {
return axios.post('/api/users', userData);
}
}
// signupForm.js
export default class SignupForm extends Component {
// ...
handleSubmit = e => {
const userData = e.target.value
this.props.signupRequest(userData)
.then(() => this.props.dispatch(signupSuccess()))
.then(() => {
// now i can easily access history inside the component
this.props.history.push('/')
})
.catch(error => dispatch(signupFailure(error.message))) }
}
그렇다면 어떤 방법을 따라야하며이 문제를 해결하기위한 모범 사례가 있습니까?
이것이 가장 좋은 방법입니다,하지만 난 볼 수 있는지 확인하면 어떤 사람들은 이런 식으로 작업을 수행합니다 솔루션을
핵심은 히스토리를 단일 파일에 넣어서 참조하고 컴포넌트 외부에서 사용할 수 있도록하는 것입니다.
먼저 histor독립 실행 형 파일에 y 개체를 만듭니다 .
// history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
그런 다음 Router구성 요소에 포장하고 다음 Router대신 사용하십시오 BrowserRouter.
import { Router, Route } from 'react-router-dom';
import history from './history';
ReactDOM.render(
<Router history={history}>
...
</Router>
)
마지막으로 redux actionCreators에서 history객체 를 가져 와서 사용할 수 있습니다.
// SignupAction.js
import history from './history'
export const signupRequest = (userData) => {
return dispatch => {
dispatch(signupPending())
return axios.post('/api/user', userData)
.then(res => dispatch(signupSuccess()))
.then(() => {
// we are reference/use the same `history` all the time by import it
history.push('/')
})
.catch(error => dispatch(signupFailure(error.message)))
}
}
그래서 기본적으로 저는 여전히 actionCreator 안에 로직을 넣는 것을 선호합니다. 컴포넌트는 UI 렌더링에만 초점을 맞춰야하며 로직은 대신 redux로 처리해야합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다