Collection State Into Redux

Andrei Neagoie
A free video tutorial from Andrei Neagoie
Senior Software Developer turned Instructor
4.7 instructor rating • 12 courses • 349,071 students

Lecture description

Why do we need Redux? React.js is a view library which means that as our applications get larger and larger, we will have more and more data or state that needs to be displayed and updated on a website. Redux helps us manage this larger and larger state by moving all of this data into a single store or JavaScript object so programmers can better manage large applications.

Learn more from the full course

Complete React Developer in 2021 (w/ Redux, Hooks, GraphQL)

Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase

39:39:27 of on-demand video • Updated October 2020

  • Build enterprise level React applications and deploy to production
  • Learn to build reactive, performant, large scale applications like a senior developer
  • Learn the latest features in React including Hooks, Context API, Suspense, React Lazy + more
  • Master the latest ecosystem of a React Developer from scratch
  • Become the top 10% ReactJS Developer
  • Using GraphQL as a React Developer
  • Use Redux, Redux Thunk and Redux Saga in your applications
  • Learn to compare tradeoffs when it comes to different state management
  • Set up authentication and user accounts
  • Use Firebase to build full stack applications
  • Learn to lead React projects by making good architecture decisions and helping others on your team
  • Master React Design Patterns
  • Learn CSS in JS with styled-components
  • Routing with React Router
  • Converting apps to Progressive Web Apps
  • Testing your application with Jest, Enzyme and snapshot testing
  • Handling online payments with Stripe API
  • Using the latest ES6/ES7/ES8/ES9/ES10 JavaScript to write clean code
English In this lesson what we're going to tackle is moving the shop information that we're displaying in our shop page into its own reducer. The same way that we just did with our directory so we want to move our shop.data.js into its own reducer rather than keep it on our shop page component. The way that we have in its internal state right now some of you might be wondering in a traditional application how is this data stored especially if this list of items grows beyond the maximum of 10 per category that we have. While a lot of times it's actually stored on a backend, and on a backend it's easier for them to put in the new items and then have all the respective frontend applications like a web application or a mobile application pull in the data from the back end, so that it's always consistent versus keeping this data on the frontend. However, we won't be doing that in this lesson. We would do that in a future lesson on firebase in a more advanced firebase section, just so you're familiar with the actual pattern of what it's like to pull that information into your shop component. But right now there's a lot that we can still get out of keeping it on our frontend because there's a lot of additional redux things that we can take advantage of that we'll cover in the next lesson. But in this lesson simply the practice of putting our shop data inside of a reducer is still valuable and I know we just did it with our directory. But as I mentioned practice makes perfect and there's gonna be a couple of things that we're gonna do that will get really interesting with the way that we're doing our shop data right now so let's actually start. The first thing we need to do is add a new shop redux folder and inside we need our shop.reducer.js and also our shop.selectors.js we're also going to bring our shop data down from our component folder into our redux folder and then in our reducer we're going to use it. So when I declare our initial state and here we're gonna say collections point to our shop.data So we have to import that in and we'll say collections points to that array and now for our actual reducer function, we're gonna say shop reducer equals a function that gets the state which by default is initial state as well as an action and then we'll write our usual switch statement. But just like we do with our directory because there's no modifications we only have our default which returns the state and then we'll export out our shop reducer and pull it into our root reducer. So let's import in our shop reducer and let's say shop points to shop reducer inside of our root reducer. So now that we have our root reducer set up with our shop reducer we need to actually pull it into our shop component. So inside of our shop component we know that we don't need shop data anymore and we don't need the constructor so we can actually switch our class component over to a functional component. And we know we'll be passing collections in and let's just fix up our brackets here and then we need to actually connect this new component now to our redux, but before we do that we also know that we need our selectors. So let's go to our new shop.selectors file and let's bring in our create selector from reselect, and then first we'll declare our initial input selector which is our select shop; which gets the state and returned state.shop and then we'll have our select shop items which will be equal to create selector taking our select shop and then with a function of shop.shopItems let's go back to our shop component and pull in both the selector as well as connect redux shop.selectors We also need both connect and our create structured selector. So we need connect from react-redux and createStructuredSelector from reselect and now in our const mapStateToProps it will be createStructuredSelector with collections going to our selectShopItems actually this name is wrong it's supposed to be selectCollections. I just realized that we actually named that incorrectly. So inside our shop selectors let's just fix up that naming and then change our component to be the right one point to the right thing and then connect our mapStatesToProps in and now let's see our shop component reselect is spelled wrong. reselect Everything works. So as you saw, it's a lot at! It's so many files right, with react and Redux. It's always just getting used to making all the right files. Calling in the right libraries setting up the right code. It's definitely something that needs a lot of practice. And the more practice we have the better. But as you saw even I stumble, just keeping track mentally of all the things, the pieces, and the moving parts that we need. It's always difficult once you do the first setup but after that we saw before how easy it was just to add new actions. pull in state Once all of our correct components are connected to the state it's just the initial setup is a little lengthier. So now that we have our shop component and we have a connected let's start actually building our category pages because now we're able to leverage the collections that we've got stored on our redux state.