![]() Like many other libraries, React-Redux includes its own custom hooks, which you can use in your own components. React also lets us write custom hooks, which let us extract reusable hooks to add our own behavior on top of React's built-in hooks. You should be familiar with React hooks like useState, which can be called in React function components to give them access to React state values. Let's start by creating a component that can read the list of todos from the store, loop over them, and show one component for each todo entry. We know that we need to be able to show a list of todo items. Here's the initial React UI of this app before we start adding any Redux-related logic: Reading State from the Store with useSelector On that note, since we assume that you already know React, we're going to skip past the details of how to write the layout code for these components and focus on how to actually use the React-Redux library in your React components. There's no single right way to divide these, and you'll find that it may be better to write larger components or split things into many smaller components depending on your situation.įor now, we'll start with this small list of components to keep things easier to follow. For example, the component could be one larger component, or it could have multiple smaller components inside like, , and. : Shows the number of active todos and controls for filtering the list based on completed status and color categoryīeyond this basic component structure, we could potentially divide the components up in several different ways.: a single todo list item, with a checkbox that can be clicked to toggle the todo's completed status, and a color category selector.: a list of all currently visible todo items, based on the filtered results.: contains the "new todo" text input and the "complete all todos" checkbox.: the root component that renders everything else.Much like we designed the state structure based on requirements, we can also design the overall set of UI components and how they relate to each other in the application.īased on the list of business requirements for the app, at a minimum we're going to need this set of components: See the official React-Redux docs at for a complete guide on how to use Redux and React together, and reference documentation on the React-Redux APIs. Let's go back to the the counter app example we saw in Part 1 and see how it follows those steps: Respond to UI inputs by dispatching Redux actions.If necessary, render the UI with initial state.Extract the data needed by this piece of UI.Using Redux with any UI layer requires a few consistent steps: React lets you describe your UI as a function of your state, and Redux contains state and updates it in response to actions.īecause of that, we'll use React for this tutorial as we build our todo app, and cover the basics of how to use React with Redux.īefore we get to that part, let's take a quick look at how Redux interacts with a UI layer in general. That said, Redux was specifically designed to work well with React. You can write Redux apps with React, Vue, Angular, Ember, jQuery, or vanilla JavaScript. This also means that you can use Redux with any UI framework (or even without any UI framework), and use it on both client and server. As we've already seen, you can create and use a Redux store even if you don't have a user interface set up. We'll see how Redux works with a UI layer overall, and we'll specifically cover how Redux works together with React. In this section, we'll add a User Interface for our todo app. We also looked at how a store works inside, how enhancers and middleware let us customize the store with additional abilities, and how to add the Redux DevTools to let us see what's happening inside our app as actions are dispatched. In Part 4: Store, we saw how to create a Redux store, dispatch actions, and read the current state.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |