Перемещение данных между компонентами Reactjs с помощью Redux в ядре ASP.net - PullRequest
0 голосов
/ 17 мая 2019

В 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);

Я заблудился здесь, все должно быть просто, поскольку нет изменений в состоянии только при переходе от одного компонента к другому.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...