您好,自从我学习React
和Redux
以来已经有两个星期了,我想知道从我的ActionCreators.js
文件中导出了const postFeedback
并将其导入到我的MainComponent.js
中,但是我遇到了这个错误
./src/Components/MainComponent.js
Attempted import error: 'postFeedback' is not exported from '../redux/ActionCreators'.
***这是我的ActionCreators.js文件
import * as ActionTypes from './ActionTypes';
import {baseUrl} from '../shared/baseUrl';
export const addComment = (comment) => ({
type: ActionTypes.ADD_COMMENT,
payload: comment
});
//////
export const postComment = (dishId, rating, author, comment) => (dispatch) => {
const newComment = {
dishId: dishId,
rating: rating,
author: author,
comment: comment
};
newComment.date = new Date().toISOString();
return fetch(baseUrl + 'comments', {
method: "POST",
body: JSON.stringify(newComment),
headers: {
"Content-Type": "application/json"
},
credentials: "same-origin"
})
.then(response => {
if (response.ok) {
return response;
} else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
throw error;
})
.then(response => response.json())
.then(response => dispatch(addComment(response)))
.catch(error => { console.log('post comments', error.message); alert('Your comment could not be posted\nError: '+error.message); });
};
///FEEDBACK
export const postFeedback = (feedback) => (dispatch) => {
const newFeedback = Object.assign({ date: new Date().toISOString() }, feedback);
return fetch(baseUrl + 'feedback', {
method: 'POST',
body: JSON.stringify(newFeedback),
headers: {
'Content-Type': 'application/json'
},
credentials: 'same-origin'
})
.then(response => {
if (response.ok) {
return response;
} else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errorMessage = new Error(error.errorMessage);
throw errorMessage;
}
)
.then(response => response.json())
.then(response => dispatch(addComment(response)))
.catch(error => {
console.log('Post feedback: ' + error.message);
alert('Feedback could not be posted:\n' + error.message)
})
};
//////
export const fetchDishes = () => (dispatch) => {
dispatch(dishesLoading(true));
return fetch(baseUrl + 'dishes')
.then(response => {
if (response.ok) {
return response;
} else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errmess = new Error(error.message);
throw errmess;
})
.then(response => response.json())
.then(dishes => dispatch(addDishes(dishes)))
.catch(error => dispatch(dishesFailed(error.message)));
}
export const fetchComments = () => (dispatch) => {
return fetch(baseUrl + 'comments')
.then(response => {
if (response.ok) {
return response;
} else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errmess = new Error(error.message);
throw errmess;
})
.then(response => response.json())
.then(comments => dispatch(addComments(comments)))
.catch(error => dispatch(commentsFailed(error.message)));
};
export const fetchPromos = () => (dispatch) => {
dispatch(promosLoading());
return fetch(baseUrl + 'promotions')
.then(response => {
if (response.ok) {
return response;
} else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errmess = new Error(error.message);
throw errmess;
})
.then(response => response.json())
.then(promos => dispatch(addPromos(promos)))
.catch(error => dispatch(promosFailed(error.message)));
}
///***Assignment4 where we used all the three actions in this thunk to make effective use of them and also to make the fetch available
export const fetchLeaders = () => (dispatch) => {
dispatch(leadersLoading());
return fetch(baseUrl + 'leaders')
.then(response => {
if (response.ok) {
return response;
} else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errmess = new Error(error.message);
throw errmess;
})
.then(response => response.json())
.then(promos => dispatch(addLeaders(promos)))
.catch(error => dispatch(leadersFailed(error.message)));
}
export const commentsFailed = (errmess) => ({
type: ActionTypes.COMMENTS_FAILED,
payload: errmess
});
export const addComments = (comments) => ({
type: ActionTypes.ADD_COMMENTS,
payload: comments
});
export const dishesFailed = (errmess) => ({
type: ActionTypes.DISHES_FAILED,
payload: errmess
});
export const promosLoading = () => ({
type: ActionTypes.PROMOS_LOADING
});
export const promosFailed = (errmess) => ({
type: ActionTypes.PROMOS_FAILED,
payload: errmess
});
export const addPromos = (promos) => ({
type: ActionTypes.ADD_PROMOS,
payload: promos
});
export const addDishes = (dishes) => ({
type: ActionTypes.ADD_DISHES,
payload: dishes
});
export const dishesLoading = () => ({
type:ActionTypes.DISHES_LOADING
});
/////***Assignement4
//basically we created the actions here now to make them be used using thunk
export const addLeaders = (leaders) => ({
type: ActionTypes.ADD_LEADERS,
payload: leaders
});
///
export const leadersLoading = () => ({
type: ActionTypes.LEADERS_LOADING,
});
export const leadersFailed = (errmess) => ({
type: ActionTypes.LEADERS_FAILED,
payload: errmess
});
//ADDED THREE NEW ACTIONS NOW TO FETCH THUNK THEM
***这是我的MainComponent.js文件
import { postComment, fetchDishes, fetchComments, fetchPromos ,fetchLeaders ,postFeedback} from '../redux/ActionCreators';
const mapDispatchToProps = dispatch => ({
postFeedback: (firstname, lastname, telnum, email, agree, contactType, message) =>
dispatch(postFeedback(firstname, lastname, telnum, email, agree, contactType, message))
});
我建议像这样更新mapDispatchToProps
:
const mapDispatchToProps = dispatch => {
return {
postFeedback: () => dispatch(postFeedback),
}
}
然后按如下所示在您的组件中调用它:
this.props.postFeedback(firstname, lastname, ...other args)