javascript redux函数
我正在阅读一个关于使用redux构建前端登录注册-auth应用程序的教程。我不太清楚protectedTest()函数在下面的代码中是如何工作的。据我所知，调用src/action/index.js中的protectedTest将返回一个函数，该函数将向服务器发送一个http请求。但是，当我们在src/component/dashboard.js中调用this.props.protectedTest时，为什么我们期望它与服务器通信( authoer声明这就是将要发生的事情)，而它只应该创建一个完成工作的功能？还是我在这里错过了什么？
src/actions/index.js
import axios from 'axios';
import { browserHistory } from 'react-router';
import cookie from 'react-cookie';
import { AUTH_USER,
AUTH_ERROR,
UNAUTH_USER,
PROTECTED_TEST } from './types';
const API_URL = 'http://localhost:3000/api';
export function errorHandler(dispatch, error, type) {
let errorMessage = '';
if(error.data.error) {
errorMessage = error.data.error;
} else if(error.data{
errorMessage = error.data;
} else {
errorMessage = error;
}
if(error.status === 401) {
dispatch({
type: type,
payload: 'You are not authorized to do this. Please login and try again.'
});
logoutUser();
} else {
dispatch({
type: type,
payload: errorMessage
});
}
}
export function loginUser({ email, password }) {
return function(dispatch) {
axios.post(`${API_URL}/auth/login`, { email, password })
.then(response => {
cookie.save('token', response.data.token, { path: '/' });
dispatch({ type: AUTH_USER });
window.location.href = CLIENT_ROOT_URL + '/dashboard';
})
.catch((error) => {
errorHandler(dispatch, error.response, AUTH_ERROR)
});
}
}
export function registerUser({ email, firstName, lastName, password }) {
return function(dispatch) {
axios.post(`${API_URL}/auth/register`, { email, firstName, lastName, password })
.then(response => {
cookie.save('token', response.data.token, { path: '/' });
dispatch({ type: AUTH_USER });
window.location.href = CLIENT_ROOT_URL + '/dashboard';
})
.catch((error) => {
errorHandler(dispatch, error.response, AUTH_ERROR)
});
}
}
export function logoutUser() {
return function (dispatch) {
dispatch({ type: UNAUTH_USER });
cookie.remove('token', { path: '/' });
window.location.href = CLIENT_ROOT_URL + '/login';
}
}
export function protectedTest() {
return function(dispatch) {
axios.get(`${API_URL}/protected`, {
headers: { 'Authorization': cookie.load('token') }
})
.then(response => {
dispatch({
type: PROTECTED_TEST,
payload: response.data.content
});
})
.catch((error) => {
errorHandler(dispatch, error.response, AUTH_ERROR)
});
}
}src/components/dashboard.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
class Dashboard extends Component {
constructor(props) {
super(props);
this.props.protectedTest();
}
renderContent() {
if(this.props.content) {
return (
<p>{this.props.content}</p>
);
}
}
render() {
return (
<div>
{this.renderContent()}
</div>
);
}
}
function mapStateToProps(state) {
return { content: state.auth.content };
}
export default connect(mapStateToProps, actions)(Dashboard); 回答 1
Stack Overflow用户
发布于 2017-11-24 07:47:31
为什么我们期望它与服务器通信( authoer声明这就是将要发生的事情)，而它只应该创建一个完成工作的功能
原始redux库使用简单的javascript对象操作，是的。这意味着不存在异步操作，因为应用程序需要知道要立即执行什么操作。
但是，很明显，应用程序通常需要做一些异步操作，这就是redux-thunk出现的原因。
在本教程中也使用了它，请检查"Create index.js并输入以下部分：“
// ...
import reduxThunk from 'redux-thunk';
// ...
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);
// ...Redux thunk将立即调用任何带有分派函数的操作函数，在该函数中您将执行一些必要的异步操作。
https://github.com/gaearon/redux-thunk/blob/master/src/index.js#L3
在收到一些结果之后，您只需要用接收到的数据发送一个简单的旧操作。
dispatch({
type: PROTECTED_TEST,
payload: response.data.content
});这是我找到的一个关于redux-thunk的视频：https://www.youtube.com/watch?v=1QI-UE3-0PU
此外，redux-thunk存储库在其自述文件中也有很好的描述。
https://stackoverflow.com/questions/47467516
复制相似问题
腾讯云开发者
