amcquade/quick-feed

Create context for global app state

Opened this issue · 1 comments

Suggestion :

As the app is starting to grow and we are welcoming new features, I suggest to add React's Context to handle global data to avoid using props on multiple hierarchy levels. We could also by the same occasion export the getFeed method to another file so all component have access to it. This way, we would avoid passing getFeed as props to every component.

In order to achieve this, we need to :

  • Create the context
  • Use an initial state with these data : the user's currently displayed feed , the user's previous feeds, the user's favorite feeds, the fetching state of the feed, and the error indicator. We suggest this format for the initial state :
const initialState = {
  currentFeed: {
    episodes: [],
    program_title: '',
    program_image: '',
    program_description: '',
    program_link: ''
  },
  onFetching: false,
  previousFeeds: [],
  error: false,
  favoriteFeeds: [],
};
  • Create the corresponding reducers to update the state (add, remove)
  • Export the getFeed method to another file to avoid sharing the method via props on too many hierarchy levels

Instead of using Context introducing a state management library will help in the future .