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:
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 kommentar(er)
