reactjs - 在 Redux 中将状态从一个 reducer 传递到另一个 reducer

问题描述

我想将状态从我的 searchReducer 传递给我的 movieReducer。搜索接受输入并将电影的 id 保存到状态中，我想获取该 id 值并将其传递给我的电影的 fetch，以便我可以使用 id 获取每部电影并保存数据进入movieReducer的状态。我怎样才能做到这一点？

actions.js

// ------------------ SEARCH ------------------

export const searchMovie = text => dispatch => {
  dispatch({
    type: SEARCH_MOVIE,
    payload: text
  })
}

export const fetchSearch = text => dispatch => {
  axios.get(`https://api.themoviedb.org/3/search/multi?api_key=API_KEY&language=en-US&query=${text}&page=1&include_adult=false`)
  .then(response => dispatch({
    type: FETCH_SEARCH,
    payload: response.data.results.map(search => search.id)
  }))
  .catch(error => console.log(error))
}

// ------------------ MOVIES ------------------

export const fetchMovie = text => dispatch => {
  axios.get(`https://api.themoviedb.org/3/movie/${text}?api_key=API_KEY&append_to_response=videos,credits,recommendations,watch/providers`)
  .then(response => dispatch({
    type: SPECIFIC_MOVIE,
    payload: response.data.results
  }))
  .catch(error => console.log(error))
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose, combineReducers  } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import App from './App'
import reportWebVitals from './reportWebVitals';

import favoritesReducer from './redux/favoritesReducer.js'
import moviesReducer from './redux/moviesReducer.js'
import showsReducer from './redux/showsReducer.js'
import userReducer from './redux/userReducer';
import searchReducer from './redux/searchReducer.js'

const rootReducer = combineReducers({
  favorties: favoritesReducer,
  movies: moviesReducer,
  shows: showsReducer,
  users: userReducer,
  search: searchReducer
})


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

export default

searchReducer.js

 const initialState = {
     text: '',
     movies: [],
     loading: false,
     movie: []
 }



const searchReducer = (state = initialState, {type, payload}) => {
    switch (type) {
        case 'SEARCH_MOVIE':
            return {
                ...state,
                text: payload,
                loading: false
            };
        case 'FETCH_SEARCH':
            return {
                ...state,
                movies: payload,
                loading: false
            };
        default:
            return state;
    }
} 

export default searchReducer

movieReducer.js

const initialState = {
    text: '',
    movie: []
}

const moviesReducer = (state = initialState, {type, payload}) => {
   switch (type) {
       case 'SPECIFIC_MOVIE':
           return {
               ...state,
               movie: payload
           };
       default:
           return state;
   }
} 

export default moviesReducer

MoviePage.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchMovie } from '../../actions/searchActions';

export class Movie extends Component {
  componentDidMount() {
    this.props.fetchMovie(this.props.match.params.id);
  }
  render() {
    const { movie } = this.props;
    let movieInfo = (
      <div className="container">
            <img src={movie.Poster} className="thumbnail" alt="Poster" />
            <h2 className="mb-4">{movie.Title}</h2>
                <li>Genre:</li> {movie.Genre}
                <li>Released:</li> {movie.Released}
                <li>Rated:</li> {movie.Rated}
                <li>IMDB Rating:</li> {movie.imdbRating}
                <li>Director:</li> {movie.Director}
                <li>Writer:</li> {movie.Writer}
                <li>Actors:</li> {movie.Actors}
              <h3>About </h3>
              {movie.Plot}
    </div>
    );

    return <div>{}</div>;
  }
}

const mapStateToProps = state => ({
  movie: state.movies.movie
});

export default connect(mapStateToProps,{ fetchMovie })(Movie);

标签： reactjsreduxreact-reduxredux-thunkreducers

export const fetchMovie = text => (dispatch, getState) => { console.log(getState()); // you can see the info about your state tree here axios.get(`https://api.themoviedb.org/3/movie/${text}?api_key=API_KEY&append_to_response=videos,credits,recommendations,watch/providers`) .then(response => dispatch({ type: SPECIFIC_MOVIE, payload: response.data.results })) .catch(error => console.log(error)) }

reactjs - 在 Redux 中将状态从一个 reducer 传递到另一个 reducer

问题描述

解决方案

推荐阅读