For this part of the project, we used redux to handle state management with axios.
Redux is a predictable state container for JavaScript applications.
It is:
Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more.
The Redux DevTools make it easy to trace when, where, why, and how your application's state changed. Redux's architecture lets you log changes, use "time-travel debugging", and even send complete error reports to a server.
Assuming you have npm installed, you can download the tool through a simple pip install:
npm i react-redux
With react-redux, it's good to have organize your information into actions and reducers.
\src
...
\redux
\actions
\reducers
...
A reducer is a pure function taking the state and action of an application as arguments and returning a new state.
For our app so far, we set types to these actions. These types are defined in the types.js file, which are associated to actions. Usually states can't be directly changed. With reducers, we can use the JS spread operator to make sure we don't change the value of the state directly but instead to return a new object that contains a state passed to it and the payload of the user.
export default function(state = initialState, action) {
switch (action.type) {
case FETCH_POPULAR_MOVIES:
return {
...state,
now_popular: action.payload,
loading: false
};
case RETRIEVE_NOWPLAYING_MOVIES_SUCCESS:
return {
...state,
now_playing: action.payload,
loading: false
};
case LOADING:
return {
...state,
loading: true
};
default:
return state;
}
}
An action is an object with a payload. Typically, these actions are JS objects telling Redux the type of actions to be performed.
In this example, we commit an action by fetching popular movies from the TMDB api. We use axios to fetch the results and "dispatch" by sending the type and putting the response in a payload.
export const fetchPopularMovies = page => dispatch => {
return axios
.get(`${TMDB_URL}/movie/popular?api_key=${TMDB_API_KEY}&page=${page}`)
.then(response =>
dispatch({
type: FETCH_POPULAR_MOVIES,
payload: response.data
})
).catch(err => console.log(err));
}
In Redux, dispatch needs to tell the app that the state has been updated. This happens through listeners and subscriptions. In the useReducer hook, React recognizes that the state was updated and re-renders the component. The updated state is then returned to the component from where the useReducer hook was called.
By default, a connected component receives props.dispatch and can dispatch actions itself. connect can accept an argument called mapDispatchToProps, which lets you create functions that dispatch when called, and pass those functions as props to your component.
We connect our actions through our Home page
export default connect(mapStateToProps)(Home);