exercise-4.md

Loading and saving the Trello state

Loading the state

• Import and apply the Redux Thunk middleware

• Add some initial content to the db.json file:

  {
      "lists": [{
          "id": 0,
          "title": "First list"
      }, {
          "id": 1,
          "title": "Second list"
      }],
      "cards": [{
          "id": 0,
          "text": "Example card",
          "listId": 0
      }, {
          "id": 1,
          "text": "Another card",
          "listId": 0
      }, {
          "id": 2,
          "text": "Example card in list 2",
          "listId": 1
      }, {
          "id": 3,
          "text": "Another card in list 2",
          "listId": 1
      }]
  }

• Reset the initialState of your app to:

  {
      lists: []
  }

• Add an async action and its sync counterparts for fetching the lists:

  • fetchLists() should make a GET request to http://localhost:3000/lists?_embed=cards

• Update the reducer to handle the sync actions.

• Dispatch the fetchLists() action from the Board's componentDidMount method.

• Test out your app - you should see the contents of your database being loaded.

Saving the state

• Rename your current addCard and addList actions to addCardSuccess and addListSuccess.
• Add async actions and their remaining sync counterparts for adding a new card and a new list to the database:
  • addCard(card) should make a POST request to http://localhost:3000/cards, passing JSON.stringify(card) as the request body.
  • addList(list) should make a POST request to http://localhost:3000/lists, passing JSON.stringify(list) as the request body.
• Update the reducer to handle the sync Request and Error actions - it should already handle the Success actions.
• Test out your app - adding cards and lists should see them added to db.json, and the additions should be reflected in the app.