mAAdhaTTah/brookjs

---
name: Making a Todo List
route: /walkthrough/making-a-todo-list/
menu: Walkthrough
---

# Making a Todo List

Now that we know how to combine together `brookjs` components into bigger components, let's start building our todo list. At this point, we're going to add some application level state, which we'll keep in Redux.

## Create `AddTodo` Component

We're going to start with the `AddTodo` component, which is a modified `Submit` component. It should look familiar.

[AddTodo.js](embedded-codesandbox://making-a-todo-list?module=/src/components/AddTodo.js&view=editor)

The differences here are the label and the emitted action (and obviously the component name).

## Create `App` Component

Now that we have a component to add new todos, we need to create the `App` component. This combines the `AddTodo` with the list of created todos.

In your application, you'll have two choices at this point: if you want to avoid Redux, `useDelta` works perfectly well at this point in the application, managing your root state. Alternatively, you can do it in Redux and manage app-level state outside of your UI tree. For demonstration purposes, we're going to wire it up to Redux, which means the App component won't have any state.

Let's see what that looks like:

[App.js](embedded-codesandbox://making-a-todo-list?module=/src/components/App.js&view=editor)

Note that even though this emits events, we don't have to wire anything up here.

## Wiring the `App` to Redux

This entry point is generated by default for you with the CLI, but let's take a look at a simplified version. This is the application entry point, where it connects everything together and starts the application. Not everything we're importing we've seen yet, but we'll look at all of it by the end of this walkthrough.

[index.js](embedded-codesandbox://making-a-todo-list?module=/src/index.js&view=editor)

We use a wrapped version of `createStore` provided by `brookjs` to create our Redux store. This enables a few things:

1. A correctly-typed Eddy reducer (for using with [TypeScript][ts])
1. A single `rootDelta`
1. Wiring into redux devtools

We create a render function that is called every time the store changes. Instead of pulling in `react-redux`, we subscribe to the store directly and map the state to props for the `App` component. We'll then drill down the props to the child components as needed. This keeps the initial app light and allows you to bring in `react-redux` when you need.

We then dispatch an `init` event to kick off the application. This is useful for the `rootDelta` if you want them to emit events on startup, as they can't emit events synchronously on bootstrapping.

## Manage Redux State

Now that we've got the application wired to Redux, we need to write the functions that manage our Redux state. In the above, that's the `state.js` module, which contains our root selector function as well as our reducer.

Let's take a look.

[index.js](embedded-codesandbox://making-a-todo-list?module=/src/state/index.js&view=editor)

We again create a reducer with `handleActions` for the `todoReducer`, and we import `combineReducers` from `brookjs` instead of Redux. This will provide some extra features we'll learn about later. We also create a `mapStateToProps`, which plucks off the `todos` we need for our `App`. This should all be pretty familiar if you've used Redux before.

[Making a Todo List](embedded-codesandbox://making-a-todo-list)

[ts]: https://www.typescriptlang.org/