В ASP.Net Core 2.2 с использованием шаблона Reactjs Redux.
У меня есть 3 компонента,
Фильм , Клиент , и потомок обоих Выдано
Я хочу передать выпущенный фильм из компонента Movie в Issued, удерживать там состояние с помощью Redux, чтобы я мог добавить Customer из компонента customer, а затем отправить его.
Поэтому я добавил в reduxудерживайте состояние «Выдано» при выборе в компонентах «Фильм» и «Клиент».
Идентификатор и заголовок передаются в объект state.issuedMovie файла Movie.jsx, но они не отображаются в Redux Movie.js.Так что это не идет вверх.
Все же я передаю все состояние state => state.movie, и я могу вызвать данные из Redux (не показаны), чтобы показать все фильмы.
Так что, если данные могут прийти вниз, как мне получить объект эмитента Movie, который содержит movieid и заголовок, чтобы подняться?
edit: если я установил свой выданный объект в Redux (Movie.js)с некоторыми значениями по умолчанию они будут переданы в Issued.jsx.Таким образом, перерыв заключается в установке выданного объекта в Redux, когда выданный объект поднимается в Movies.jsx
. В моем компоненте Redux Movie.js у меня есть
следующее.(показан только соответствующий код)
const rentMovieType = 'RENT_MOVIE';
const issuedMovie = {
movieID: "",
title: ""
};
const initialState = { issuedMovie, isLoading: false };
export const actionCreators = {
RentMovie: (issuedMovie) => ({ type: rentMovieType, issuedMovie }),
export const reducer = (state, action) => {
state = state || initialState;
if (action.type === rentMovieType) {
console.log(" movie.js rentMovieType " + state.issuedMovie.movieID); //returns empty
console.log(" movie.js rentMovieType " + state.issuedMovie.title); //returns empty
return {
...state,
issuedMovie: action.issuedMovie
};
}
return state;
};
В моем ConfigureStore.js у меня есть
const reducers = {
movie: Movie.reducer
};
В моем компоненте Movies.jsx, где я хочу получить состояние, у меня есть
this.state = {
issuedMovie: {
movieID: "",
title: ""
},
Мой дескриптор события кнопки ...
showIssuedForm = async (id, title) => {
console.log("showIssuedForm Issued ID " + id); //returns showIssuedForm Issued ID 1
console.log("showIssuedForm Issued title " + title); //returns showIssuedForm Issued title Henry IV,
this.setState((state, props) => {
return {
...this.state.issuedMovie,
issuedMovie: {
...this.state.issuedMovie,
movieID: id,
title: title
}
};
});
this.props.RentMovie(); //Run the RentMovie command in the movie.js
const { default: Issued } = await import("./Issued");
this.setState({ Issued });
};
В моем рендере есть журнал
console.log("Moviejsx movieID " + this.state.issuedMovie.movieID); //return Moviejsx movieID 1
console.log("Moviejsx title " + this.state.issuedMovie.title); //return Moviejsx title Henry IV
export default connect(
state => state.movie,
dispatch => bindActionCreators(actionCreators, dispatch)
)(Movies);
В моем компоненте Issued.jsx у меня есть
render() {
console.log("Issued.jsx movieIDprops " + this.props.issuedMovie.movieID); //returns Issued.jsx movieID props 1
console.log("Issued.jsx titleprops " + this.props.issuedMovie.title); //returns Issued.jsx title props Henry IV, Part 1: "The Hollow Crown"
return (
<div className="container-fluid" >
<h4> Issued Movie: {this.props.issuedMovie.movieID} {this.props.issuedMovie.title} </h4>
<h4>Issued Customer: {this.props.issueCustID} {this.props.issueCustFN} {this.props.issueCustLN} </h4>
</div >
);
}
....
export default connect(state => state.movie,
dispatch => bindActionCreators(actionCreators, dispatch))(Issued);
Я заблудился здесь, все должно быть просто, поскольку нет изменений в состоянии только при переходе от одного компонента к другому.