ProNextJS

    Now it’s your turn! Try solving this exercise.

    Run locally (recommended)

    Code

    Start by cloning the project repository and follow instructions in the README.

    Or in browser

    Open on Gitpod
    Continue
    Loading...

    Transcript

    Now that we have our react version of our application all ready to go, it's time to start thinking about how to use a state manager in the app writer. And there's no more OG state manager than Redux. Now Redux is a pretty simple model. There's basically three parts to it. There is the

    store that holds your data. There are selectors, which you can use in your components to get access to the elements of the store, the data in that store. And there are actions. And you dispatch

    actions to the Redux store. And then those actions then are handled by reducers that mutate the data in the store. And you get this nice unidirectional flow. So actions go into the store. Those trigger

    mutations. Mutations essentially trigger the selectors, which then update the display of the data on the page. Now in a traditional Redux setup, you have a single store. And that single store is just declared as a global variable sitting in probably a store.ts implementation file.

    And you can access the store directly as a global variable. That's not going to work because rule number one says no global variables. So that's actually what we're going to work through in this exercise. We're going to figure out how to share around a Redux store using context instead of a

    global variable. And then we'll see later on what the ramifications of that are as we get into the next exercise. Okay, so the objective here is to reimplement just the cart using Redux, starting with the 03 cart context with initial state example that we went through. Of course, if you have any

    questions about how to use Redux, be sure to consult the resources. Good luck.