![](/img/trans.png)
[英]Redux-saga, yield call(history.push, 'pathname'), works only the first time, blocking all other call
[英]redux saga and history.push
背景:
我正在創建一個Login
組件。
saga.js
由 3 個函數組成
1. rootSaga
。 它將執行里面的sagas
列表
2. watchSubmitBtn
。 它將觀察提交按鈕上的點擊並發送一個動作。
shootApiTokenAuth
會接收dispatched action
並處理axios.post
,返回值為promise
對象
在行動:
后端返回400
給React
。 這種情況下沒問題,我可以輕松讀取payload
並在render()
顯示。 但是當返回200
時。 我需要讓用戶轉到 url /companies
。
試圖:
我試過把this.props.history.push('/companies');
在componentWillUpdate()
,但它不起作用。 我必須單擊Submit
2 次才能讓 React 了解token
已保存。
Login.js
import React, {Component} from 'react';
import ErrorMessage from "../ErrorMessage";
import {Field, reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import {validate} from '../validate';
import {SUBMIT_USERNAME_PASSWORD} from "../../constants";
class Login extends Component {
constructor(props) {
//Login is stateful component, but finally action will change
//reducer state
super(props);
const token = localStorage.getItem('token');
const isAuthenticated = !((token === undefined) | (token === null));
this.state = {
token,
isAuthenticated,
message: null,
statusCode: null
};
}
onSubmit(values) {
const {userid, password} = values;
const data = {
username: userid,
password
};
this.props.onSubmitClick(data);
}
componentWillUpdate(){
console.log('componentWillUpdate');
if(this.props.isAuthenticated){
this.props.history.push('/companies');
}
}
renderField(field) {
const {meta: {touched, error}} = field;
const className = `'form-group' ${touched && error ? 'has-danger' : ''}`;
console.log('renderField');
return (
<div className={className}>
<label>{field.label}</label>
<input
className="form-control"
type={field.type}
placeholder={field.placeholder}
{...field.input}
/>
<div className="text-help">
{touched ? error : ''}
</div>
</div>
);
}
render() {
const {handleSubmit} = this.props;
return (
<div>
<ErrorMessage
isAuthenticated={this.props.isAuthenticated}
message={this.props.message}
/>
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<Field
name="userid"
component={this.renderField}
placeholder="User ID"
type="text"
/>
<Field
name="password"
component={this.renderField}
placeholder="Password"
type="password"
/>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
<a className='btn btn-primary' href="https://www.magicboxasia.com/">Sign up</a>
</div>
);
}
}
const onSubmitClick = ({username, password}) => {
return {
type: SUBMIT_USERNAME_PASSWORD,
payload: {username, password}
};
};
const mapStateToProps = (state, ownProps) => {
return {
...state.login
}
};
export default reduxForm({
validate,
form: 'LoginForm'
})(
connect(mapStateToProps, {onSubmitClick})(Login)
);
saga.ja
const shootApiTokenAuth = (values) =>{
const {username, password} = values;
return axios.post(`${ROOT_URL}/api-token-auth/`,
{username, password});
};
function* shootAPI(action){
try{
const res = yield call(shootApiTokenAuth, action.payload);
yield put({
type: REQUEST_SUCCESS,
payload: res
});
}catch(err){
yield put({
type: REQUEST_FAILED,
payload: err
});
}
}
function * watchSubmitBtn(){
yield takeEvery(SUBMIT_USERNAME_PASSWORD, shootAPI);
}
// single entry point to start all Sagas at once
export default function* rootSaga() {
yield all([
watchSubmitBtn()
])
}
問題:
如何設置組件狀態並push
送到 url /companies
? 后端返回200
?
我通常在傳奇中處理條件導航。
現有代碼最簡單的答案是在 SUBMIT_USERNAME_PASSWORD 操作中將歷史對象作為道具傳遞,並在傳奇成功的情況下執行 history.push() 調用,例如:
const onSubmitClick = ({username, password}) => {
const { history } = this.props;
return {
type: SUBMIT_USERNAME_PASSWORD,
payload: {username, password, history}
};
};
......
function* shootAPI(action){
try{
const res = yield call(shootApiTokenAuth, action.payload);
const { history } = action.payload;
yield put({
type: REQUEST_SUCCESS,
payload: res
});
history.push('/companies');
}catch(err){
yield put({
type: REQUEST_FAILED,
payload: err
});
}
}
import { push } from 'react-router-redux';
yield put(push('/path-to-go'));
解決了我的問題
我在反應方面沒有經驗,但您可以按以下方式實現:
1.新建一個模塊: history-wrapper.ts
export class HistoryWrapper {
static history;
static init(history){
HistoryWrapper.history = history;
}
}
2.在你登錄.jsx
HistoryWrapper.init(history);//initialize history in HistoryWrapper
3.隨后在您的應用程序中的任何位置
HistoryWrapper.history.push('/whatever');
React 有額外的生命周期。 我今天才知道。 他們中有很多人。
componentDidUpdate() {
this.props.history.push('/companies');
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.