I wrote the memory card game using Context in the main branch and Redux in the 'Redux' branch: View code on Github »
You can play it here. Word of warning though, don't play it when you have work to do because it's totally addictive. You'll be playing it for hours. Hours! Just kidding. I'm linking to it simply for illustrative purposes.
I broke the memory card game down into 3 components; table, card, scoreboard
The table component gets a shuffled deck, displays the cards and attaches click functionality to the cards. If a card is clicked on, methods evaluate the clicks to see if a match happened and the score is updated accordingly.
The card component determines whether to display the card face, card back or a checkmark for successfully matched cards that are no longer in play.
The messaging, score and gameover status are managed in GlobalContext.
Whether you use ContextApi or Redux, both provide an invaluable service; a global store that can be called from anywhere. Moving components around and structuring them as they should be is not such a burden as you don't have to rewire a bunch of props to be go through different components.
And even better, you're not passing props to a component that doesn't need them and only doing so in order to have the components beneath them have access to the props.
There's a bit of boilerplate code involved with both ContextApi and Redux, but it's worth it.
Both make use of reducers and providers.
A reducer doesn't modify directly the current state in the state variable, but rather creates a new state object stored in newState, then returns it. React checks the difference between the new and the current state to determine whether the state has been updated and whether or not to update the DOM.
A provider makes the store available to any nested component that need to access the values the store holds regardless of the component's position in the hierarchy.
Others have gone into great detail about why ContextApi is not a replacement for Redux. Here are some snippets:
Context could replace Redux in theory, "but for now it lacks selector functionality, so every consumer re-renders on every context change. It's bearable for tiny apps, but quickly degrades performance as the app grows." Dangers with using Context
From Why React Context is Not a "State Management" Tool and Why It Doesn't Replace Redux:
When should I use Context?
Any time you have some value that you want to make accessible to a portion of your React component tree, without passing that value down as props through each level of components.
When should I use Redux?
Redux is most useful in cases when:
- You have larger amounts of application state that are needed in many places in the app
- The app state is updated frequently over time
- The logic to update that state may be complex
- The app has a medium or large-sized codebase, and might be worked on by many people
- You want to be able to understand when, why, and how the state in your application has updated, and visualize the changes to your state over time
- You need more powerful capabilities for managing side effects, persistence, and data serialization
I wrote the memory card game using Context in the main branch and Redux in the 'Redux' branch: View code on Github »
