Redux is a library that helps us manage our State so we can use them from anywhere in our app rather than having to pass them down the tree as props.

npm install react-redux redux

First we set up our Store, which houses all of our states, and Provider, which gives us access to the Store. When an interaction is made on the UI, that event handler determines what type of actions happen to the payload. And the payload goes through the reducer which denotes the action and the state is altered accordingly.

Reducers are used to break up our state into little modules that we can perform Actions on

Actions are used to update state

In the component you are trying to access the state, you must have a function like mapStateToProps which takes state as an argument and allows us to assign the pieces of state we need as values inside an object. From that object we use dot notation on props to use the values that we need.

First you have to make sure your index.js is set up properly for React v.18

You have to run npm install react-redux redux

Inside the src folder, you need to create a store folder which will hold folders for Actions, Types, and Reducers

Inside the store folder, you need to create an index.js where you'll import createStore from redux, have createStore stored in a variable, and ahve the variable exported

Import that variable along with Provider from react-redux in the root index.js file and wrap your App component with Provider with store passed in

Once your Types are set up and exported, import them into your Actions and apply them appropriately to the correcct Action. Make sure that you are exporting your Actions

In your Reducers, you will write out the logic that will be performed based on each Action Type.

In the component that will use states from the Store, you ahve to import connect from react-redux and have that exported passing the mapStateToProps, which gives us access to our props in an object, and mapActionsToProps, which allows us to assign Actions to our state, as props.