How to integrate Skygear with Redux?


#1

Example for Skygear JS SDK x Redux

There are developers asking how we can integrate Skygear into redux pattern. Actually Redux is just about helping us to manage the application state. Hence it only involves how we could pass skygear records to redux.

Here’s a walkthrough and a working example on how.

Example extracted from redux.js.org. If you wish to learn about redux, https://redux.js.org/docs/introduction/ is a really good read

.

Todo App Example

Skygear integrated example: (Download to run the sample)

Original Redux Example (For reference only, so you know what it’s different between)

Example integrated with Skygear

Note: In fact you can directly use Skygear Query result (JSON) to update the state. However if you have data models, wrapper might be needed

In this example, let’s show how to fetch all records and integrate it into redux state and save a new record. We’ve introduced the skygearAPI component in place to help.

In this app, Skygear related APIs are wrapped inside src/api/skygear.js.

Example: In this example, we imported skygearAPI from src/api/skygear.js, and so we can access Skygear APIs.
(example in src/index.js)

import skygearAPI from './api/skygear'

skygearAPI.config(skygearContainer => {
    // Ready to call Skygear API
});

Loading all existing todos

in src/index.js, we config Skygear and signup a user anonymously in order to fetch the records.

// Config Skygear
skygearAPI.config(skygearContainer => {
  skygearAPI.signupAnonymously(user => { // Signup a skygear user 
    // Now we have a user to fetch the itmes from cloudDB
    store.dispatch(getAllTodos())
  })
});

Here’s what src/api/skygear.js (simplified version) looks like.

import skygear from 'skygear';

export default {
  signupAnonymously: (cb) => {
    skygear.auth.signupAnonymously().then((user)=>{
      console.log('logged in');
      cb(user);
    });
  },
  config: (cb) => {
    skygear.config({
      'endPoint': 'https://testapi20180109.skygeario.com/',
      'apiKey': '4bb9cb48bab7439c97f6d033204841fc',
    }).then(() => {
      console.log('skygear container is now ready for making API calls.');
      cb(skygear);
    }, (error) => {
      console.error(error);
    });
  }
}

In src/action/index.js, calling getAllTodos() will trigger Skygear to get all existing items from the cloudDB

export const getAllTodos = () => dispatch => {
  skygearAPI.getItems(todos => {
    console.log(todos);
    dispatch(receiveTodos(todos)) // Handle result items
  })
  dispatch({ type: 'FETCH_TODOS' }); // Fetching in prpgress
}

Saving new item to cloud

Upon adding a todo item, we will save it to Skygear Cloud. This action is defined in src/action/index.js

export const addTodo = text => dispatch => {
  skygearAPI.saveItem(text, todo => {//save to skygear
    console.log('saved to cloud');
    dispatch({
      type: 'ADD_TODO',
      todo
    });
  })
}

That’s it!

Download the example to learn in detail. If you have further questions, just ask below! :wink: