Redux Todo ✔

This is a Javascript todo app developed with Redux. It exposes a HTTP API but not a front-end. The goal of this project is to demonstrate the usage of Redux in the context of a backend app.

Running

1. Ensure Node.js is installed (v6.0.0 should work);
2. $ npm install
3. $ npm start

API

Add a new todo item

Request:

$ curl localhost:3000/api/actions -X POST \
  --data '{"type": "addTodo", "todo": {"text": "wash dishes"}}' \
  -H 'Content-Type:application/json'

Response:

{
  "type": "addTodo",
  "todo": {
    "text": "wash dishes"
  }
}

Toggle a todo

Request:

$ curl localhost:3000/api/actions -X POST \
  --data '{"type": "toggleTodo", "todo": {"id": "cf373798-efbc-4219-8fb3-e10d4c505a0b"}}' \
  -H 'Content-Type:application/json'

Response:

{
  "type": "toggleTodo",
  "todo": {
    "id": "c5cdc877-19da-48eb-99f3-983cde01379f"
  }
}

See the todo list

Request:

$ curl localhost:3000/api/state

Response:

{
  "todos": [
    {
      "id": "c5cdc877-19da-48eb-99f3-983cde01379f",
      "text": "wash dishes",
      "completed": true,
      "timestamp": "2016-09-08T01:47:00.490+0000"
    }
  ]
}

The /actions end-point accepts actions identified by the type property. (This is a convention from the Redux documentation. As a result of a successful action request, the action itself is responded to the client and the data store of the app is transformed by the appropriated action handler. As the samples above show, there are two types of action in the app: addTodo and toggleTodo. Those actions serve as representations of changes the users want to make to the underlying data store.

Error Handling

In order to perform action validations and error handling, we've used the redux-thunk middleware. It allows us to run validations before dispatching the actual action to the Redux store.

Additionally, we've also used the data.validation module from Folktale. That provides us with a Validation container to achieve functional validation style.

When something goes wrong after posting a new action, the API returns errors and do not cause a action to be dispatched.

$ curl localhost:3000/api/actions -X POST \
  --data '{"type": "addTodo", "todo": {}}' \
  -H 'Content-Type:application/json'

[
  "Todo must have a text description."
]

Client App

You can serve the React Redux Todo app using Webpack dev server. Just point to localhost:3000/ and the server side will proxy requests to Webpack.

License

Feel free to use this code as you please.