With our React and React Native starter kits for Baqend you can build blazingly fast single page applications in no time. The starters are built with Create React App and React Native CLI and use:

• ReactandReact Native for creating fast and interactive UIs for web and native apps
• Reduxas a state container for your app
• Redux Baqend Middlewarefor the comfortable use of Redux with Baqend
• Baqend as a fully managed Backend-as-a-Service for easier development

How to use our starters

1. Make sure you have Node.js installed on your machine
2. Install the Baqend CLI with npm install -g baqend
3. Checkout the starter with baqend start react-redux-starter for the React starteror baqend start react-native-starter for the React Native Starter
4. Follow the instructions for the React or the React Native starter

Your app will be connected to a Baqend test instance called ‘app-starter’. Baqend provides common backend features like data and file storage, user authentication and queries among others. To develop your own application launch a free Baqend instance at baqend.com and change the app name in your project’s src/store/store.js from ‘app-starter’ to your app name.

React

React is a Javascript library for building user interfaces by separating it into single components. It’s not a framework that comes with features like routing or support for HTTP requests, but you can easily extend it by adding libraries created by the huge React community.

Unidirectional data flow

One important thing to know is, how React keeps your views up-to-date. React uses a unidirectional data flow. That means that each components state is only manipulated by actions that set a new component state or pass new data via props to be rendered by a child component. React uses shallow equality checks, which means that it only checks if object references changed and not the data inside the objects. So if you pass some data to your React component and mutate the object itself somewhere in your application, the component will not rerender with the updated data as the reference is still the same.

Even though you can pass any data type in a React component, they should be seen as immutables, which means that once you created the data you never update it, but instead create a new version of it. This way you get a new reference and the component is rendered with the updated data. Therefore it’s recommended by the react team to use serializable data structures for your components state.

Redux

Redux is a state container, that lets you store your whole application state in one big global store instead of keeping your component state in every single component. In Redux your whole application state is stored in one big object. All the changes to your application go through this store and are passed to the components, that kind of subscribed to some data from your store. To maintain this store there are actions and reducers. Actions describe what happened somewhere in your application and can be dispatched from any component. An action only describes what happened, but does not tell your store what to do with it. That’s the job of the reducers. They specify, how the store should react to an action and where to put the new data for example.

Why is this important for working with Baqend?

When working with our Baqend SDK you will always get the same reference to an object, no matter if it’s returned by a query result or if it’s an embedded reference within another object. This way we can ensure that all referenced data is up-to-date in your application in an efficient way. If you update an object by calling its save method for example, we don’t have to tell other objects that an update occurred, as its already referencing to the newest version.

This is why we built the Redux Baqend middleware, which helps you keep your react application state clean without losing the comfortable way of working with Baqend. All the communication with your Baqend instance is done within your defined redux actions. On successful requests, the result is converted to JSON objects before it’s passed to the redux store. When you want to change your object the middleware helps you to get the original reference and apply your changes made on the JSON object to it.

How to use it

Before you can use it you have to setup your redux store and connect it to your Baqend instance. This can be easily done through the createStoreWithBaqend method, that comes with the middleware.

import { createStoreWithBaqend } from 'redux-baqend'
import { db } from 'baqend'
import middleware from '../middleware'
import reducer from '../reducer'export default function configureStore(initialState = {}) {
  return createStoreWithBaqend(
    db.connect('app-starter'),
    reducer,
    initialState,
    middleware
  )
}

That’s it. Now you can define your actions, that will get some real data from your Baqend app.

A minimal action

When receiving this kind of action, the baqendMiddleware will do the following:

{
  'BAQEND': {
    type: 'ITEMS_LOAD',
    payload: (db) => db.Item.find().resultList()
  }
}

1. Wait for the db connection to be ready
2. Pass the db object to the payload method defined in your action and execute it
3. Take the result of your query and check if it’s in JSON format already. If not it will take care of converting it to JSON
4. Dispatch the following action and pass it to the next middleware or your reducers

{
  type: 'ITEMS_LOAD',
  payload: [
    { id: '/db/Item/1', value: 'value' },
    { id: '/db/Item/2', value: 'value' }
  ]
}

You don’t have to let the middleware convert the result to JSON for you. If you like to have more control, you can easily do it on your own by using the objects toJSON and fromJSON methods.

{
  'BAQEND': {
    type: 'ITEMS_LOAD',
    payload: (db) => {
      return db.Message.find().resultList().then(results => {
        return results.map(item => item.toJSON())
      })
    }
  }
}

Updating objects

Before you can save your changes on an object, you have to make a Baqend object out of it again. This can be done by passing the JSON object into your action or using the fromJSON methodcoming with your entity.

...payload: [ item, (db, item) => {
  item.save(options)
}]orpayload: (db) => {
  item = db.Item.fromJSON(item)
  return item.save().then(item => {
    return item.toJSON()
  })
}

Get Started & Learn More

For more detailed information take a look at the documentation of the Redux-Baqend-middleware or check out our React starter kits. They show the basic usage of Baqend with React and React Native.

Have fun!