Pass state from one reducer to another in Redux - reactjs

Question

I want to pass the state from my searchReducer to my movieReducer. The search takes in an input and saves the id of the movie(s), into state, I want to take that id value and pass it into the fetch for my movies, so that I can fetch each movie with the id and save the data into the movieReducer's state. How can I do this?
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);

Answer 1

You can access the current state tree of your application using getState method inside of your action creator.
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))
}