我们已使用react-chrome-redux在react-redux上构建了chrome扩展,请参见:https://github.com/tshaddix/react-chrome-redux
我正在尝试发送操作并进行http呼叫。我们正在使用axios。我们收到错误消息:Actions may not have an undefined "type" property
使用react-chrome-redux库软件包,有一个应该模拟thunk功能的调用dispatchResponder
,但我不理解。我发送了动作,但持续收到未定义的动作类型错误,请参见:https://github.com/tshaddix/react-chrome-redux/wiki/Advanced-Usage#action-responses
这是组件中的分派。有一个handleChange函数可以通过一些验证来更新用户输入值(电子邮件,密码)的状态
handleLogin = (event) => {
event.preventDefault();
const { email, password } = this.state;
if (email && password) {
this.props.login(email, password);
}
}
....
function mapDispatchToProps(dispatch) {
return {
login: function (email, password) {
dispatch(login(email, password))
}
}
}
/**
* @property {object} classes
* @property {object} theme
* @property {object} user - User logging in
* @property {object} login - authentication attempt
*/
Login.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
user: PropTypes.object.isRequired,
login: PropTypes.func.isRequired,
};
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Login));
这是通过login
触发的操作
export function login(email, password) {
return dispatch => {
dispatch(request(email));
const data = { "email": email, "password": password };
const login = axios({
// make post request to auth service
});
login.then(
response => {
localStorage.setItem("user", JSON.stringify(response.data));
dispatch(success(response.data));
},
error => {
dispatch(failure(error));
dispatch(alertActions.error(error.message));
}
);
};
function request(email) { return { type: types.LOGIN_REQUEST, email } }
function success(user) { return { type: types.LOGIN_SUCCESS, user } }
function failure(error) { return { type: types.LOGIN_FAILURE, error } }
}
还有我的减速器。将reducer正确导入到reducer / index.js文件中
import * as types from "../constants/constants";
import * as actions from "../actions/authActions";
let user = JSON.parse(localStorage.getItem('user'));
const initialState = user ? { loggedIn, user, loading } : {};
export default (state = initialState, action) => {
switch (action.type) {
case types.LOGIN_REQUEST:
return {
...state,
loading: true,
};
default:
return state;
}
};