【发布时间】：2016-04-28 02:39:16
【问题描述】：
现在有很多关于 redux 镇最新的孩子的讨论，redux-saga/redux-saga。它使用生成器函数来监听/调度动作。
在深入了解它之前，我想知道使用 redux-saga 而不是下面我将 redux-thunk 与 async/await 一起使用的方法的优缺点。
一个组件可能看起来像这样，像往常一样调度操作。
import { login } from 'redux/auth';
class LoginForm extends Component {
onClick(e) {
e.preventDefault();
const { user, pass } = this.refs;
this.props.dispatch(login(user.value, pass.value));
}
render() {
return (<div>
<input type="text" ref="user" />
<input type="password" ref="pass" />
<button onClick={::this.onClick}>Sign In</button>
</div>);
}
}
export default connect((state) => ({}))(LoginForm);
然后我的动作看起来像这样：
// auth.js
import request from 'axios';
import { loadUserData } from './user';
// define constants
// define initial state
// export default reducer
export const login = (user, pass) => async (dispatch) => {
try {
dispatch({ type: LOGIN_REQUEST });
let { data } = await request.post('/login', { user, pass });
await dispatch(loadUserData(data.uid));
dispatch({ type: LOGIN_SUCCESS, data });
} catch(error) {
dispatch({ type: LOGIN_ERROR, error });
}
}
// more actions...
// user.js
import request from 'axios';
// define constants
// define initial state
// export default reducer
export const loadUserData = (uid) => async (dispatch) => {
try {
dispatch({ type: USERDATA_REQUEST });
let { data } = await request.get(`/users/${uid}`);
dispatch({ type: USERDATA_SUCCESS, data });
} catch(error) {
dispatch({ type: USERDATA_ERROR, error });
}
}
// more actions...
【问题讨论】：
-
在此处查看我的比较 redux-thunk 和 redux-saga 的答案：stackoverflow.com/a/34623840/82609
-
::之前的this.onClick是做什么的？ -
@ZhenyangHua 它是将函数绑定到对象的简写（
this），又名this.onClick = this.onClick.bind(this)。通常建议在构造函数中使用较长的形式，因为在每次渲染时都会重新绑定简写形式。 -
我明白了。谢谢！我看到人们经常使用
bind()将this传递给函数，但我现在开始使用() => method()。 -
@Hosar 我在生产环境中使用了一段时间的 redux 和 redux-saga，但实际上在几个月后迁移到 MobX，因为开销更少
标签： javascript reactjs redux redux-thunk redux-saga