How to Build a Todo App Using React, Redux, and Immutable.js — SitePoint

  • This helps us get a feel for what we’re going to need our components to render:
    const dummyTodos = [
    { id: 0, isDone: true, text: ‘make components’ },
    { id: 1, isDone: false, text: ‘design actions’ },
    { id: 2, isDone: false, text: ‘implement reducer’ },
    { id: 3, isDone: false, text: ‘connect components’ }
    ];

    For this application, we’re only going to need two React components, Todo / and TodoList /.

  • js

    import React from ‘react’;

    export function Todo(props) {
    const { todo } = props;
    if(todo.isDone) {
    return strike{todo.text}/strike;
    } else {
    return span{todo.text}/span;
    }
    }

    export function TodoList(props) {
    const { todos } = props;
    return (
    div className=’todo’
    input type=’text’ placeholder=’Add todo’ /
    ul className=’todo__list’
    {todos.map(t = (
    li key={t.id} className=’todo__item’
    Todo todo={t} /
    /li
    ))}
    /ul
    /div
    );
    }

    At this point, we can test these components by creating an index.html file in the project folder and populating it with the following markup.

  • /components’;

    const dummyTodos = [
    { id: 0, isDone: true, text: ‘make components’ },
    { id: 1, isDone: false, text: ‘design actions’ },
    { id: 2, isDone: false, text: ‘implement reducer’ },
    { id: 3, isDone: false, text: ‘connect components’ }
    ];

    render(
    TodoList todos={dummyTodos} /,
    the code with npm run build, then navigate your browser to the index.html file and make sure that it’s working.

  • Our dummy data is a great place to start from, and we can easily translate it into ImmutableJS collections:
    import { List, Map } from ‘immutable’;

    const dummyTodos = List([
    Map({ id: 0, isDone: true, text: ‘make components’ }),
    Map({ id: 1, isDone: false, text: ‘design actions’ }),
    Map({ id: 2, isDone: false, text: ‘implement reducer’ }),
    Map({ id: 3, isDone: false, text: ‘connect components’ })
    ]);

    ImmutableJS maps don’t work in the same way as JavaScript’s objects, so we’ll need to make some slight tweaks to our components.

  • The mapStateToProps function takes the store’s current state as an argument (in our case, a list of todos), then it expects the return value to be an object that describes a mapping from that state to props for our wrapped component:
    function mapStateToProps(state) {
    return { todos: state };
    }

    It might help to visualize this on an instance of the wrapped React component:
    TodoList todos={state} /

    We’ll also need to supply a mapDispatchToProps function, which is passed the store’s dispatch method, so that we can use it to dispatch the actions from our action creators:
    function mapDispatchToProps(dispatch) {
    return {
    addTodo: text = dispatch(addTodo(text)),
    toggleTodo: id

Dan Prince shows how to build a Todo app using React, Redux, and Immutable.js.

@JavaScriptKicks: How to Build a Todo App Using React, Redux, and Immutable.js by @sitepointdotcom #javascript #reactjs #redux

The way React uses components and a one-way data flow makes it ideal for describing the structure of user interfaces. However, its tools for working with state are kept deliberately simple — to help remind us that React is just the View in the traditional Model-View-Controller architecture.

There’s nothing to stop us from building large applications with just React, but we would quickly discover that to keep our code simple, we’d need to manage our state elsewhere.

Whilst there’s no official solution for dealing with application state, there are some libraries that align particularly well with React’s paradigm. In this post, we’ll pair React with two such libraries and use them to build a simple application.

Redux is a tiny library that acts as a container for our application state, by combining ideas from Flux and Elm. We can use Redux to manage any kind of application state, providing we stick to the following guidelines:

At the core of a Redux store is a function that takes the current application state and an action and combines them to create a new application state. We call this function a reducer.

Our React components will be responsible for sending actions to our store, and in turn our store will tell the components when they need to re-render.

Because Redux doesn’t allow us to mutate the application state, it can be helpful to enforce this by modeling application state with immutable data structures.

ImmutableJS offers us a number of immutable data structures with mutative interfaces, and they’re implemented in an efficient way, inspired by the implementations in Clojure and Scala.

We’re going to use React with Redux and ImmutableJS to build a simple todo list that allows us to add todos and toggle them between complete and incomplete.

See the Pen React, Redux & Immutable Todo by SitePoint (@SitePoint) on CodePen.

The code is available in a repository on GitHub.

. Then we’ll install the dependencies we’re going to need.

We’ll be using JSX and ES2015, so we’ll compile our code with Babel, and we’re going to do this as part of the module bundling process with Webpack.

by adding an npm script to compile our code with source maps:

each time we want to compile our code.

Before we implement any components, it can be helpful to create some dummy data. This helps us get a feel for what we’re going to need our components to render:

file in the project folder and populating it with the following markup. (You can find a simple stylesheet on GitHub):

file and make sure that it’s working.

Now that we’re happy with the user interface, we can start to think about the state behind it. Our dummy data is a great place to start from, and we can easily translate it into ImmutableJS collections:

Now that we’ve got the shape and structure figured out, we can start thinking about the actions that will update it. In this case, we’ll only need two actions, one to add a new todo and the other to toggle an existing one.

Let’s define some functions to create these actions:

Each action is just a JavaScript object with a type and payload properties. The type property helps us decide what to do with the payload when we process the action later.

Now that we know the shape of our state and the actions that update it, we can build our reducer. Just as a reminder, the reducer is a function that takes a state and an action, then uses them to compute a new state.

Here’s the initial structure for our reducer:

action is quite simple, as we can use the .push() method, which will return a new list with the todo appended at the end:

Notice that we’re also converting the todo object into an immutable map before it’s pushed onto the list.

matches the action. Then we call .update(), which takes a key and a function, then it returns a new copy of the map, with the value at the key replaced with the result of passing the initial value to the update function.

It might help to see the literal version:

Now we’ve got our actions and reducer ready, we can create a store and connect it to our React components:

We’ll need to make our components aware of this store. We’ll use the react-redux to help simplify this process. It allows us to create store-aware containers that wrap around our components, so that we don’t have to change our original implementations.

component. Let’s see what this looks like:

function takes the store’s current state as an argument (in our case, a list of todos), then it expects the return value to be an object that describes a mapping from that state to props for our wrapped component:

It might help to visualize this on an instance of the wrapped React component:

method, so that we can use it to dispatch the actions from our action creators:

Again, it might help to visualize all these props together on an instance of our wrapped React component:

Now that we’ve mapped our component to the action creators, we can call them from event listeners:

The containers will automatically subscribe to changes in the store, and they’ll re-render the wrapped components whenever their mapped props change.

component:

There’s no denying that the ecosystem around React and Redux can be quite complex and intimidating for beginners, but the good news is that almost all of these concepts are transferable. We’ve barely touched the surface of Redux’s architecture, but already we’ve seen enough to help us start learning about The Elm Architecture, or pick up a ClojureScript library like Om or Re-frame. Likewise, we’ve only seen a fraction of the possibilities with immutable data, but now we’re better equipped to start learning a language like Clojure or Haskell.

Whether you’re just exploring the state of web application development, or you spend all day writing JavaScript, experience with action-based architectures and immutable data is already becoming a vital skill for developers, and right now is a great time to be learning the essentials.

How to Build a Todo App Using React, Redux, and Immutable.js — SitePoint