React Native Flawless Ui

State Management

Why do we need state at all

State is the interface between your data from any kind of backend or local change and the representation of this data with UI-elements in the frontend. State is able to keep the data of different components in sync because each state update will rerender all relevant components.

Component state

The state of a component is like the props which are passed to a component, a plain JavaScript object containing information that influences the way a component is rendered. In comparison, to the props, the state can be changed by the component itself by calling setState which will trigger a re-render of the component. The state API of React is really simple at all and doesn’t add too much complexity to your application.

 
class Clock extends React.Component {
 state = {
   date: new Date(),
 };
​
 _refeshDate = () => this.setState({ date: new Date() });
​
 render() {
   return (
     <View>
       <Text>It is {this.state.date.toLocaleTimeString()}.</Text>
       <Button
         title="Refesh"
         onPress={this._refeshDate}
       />
     </View>
   );
 }
}

Your component dependencies and the size and complexity of your app grows you will find yourself by pushing the state up in your component-tree to inject the relevant state in several components. The distance between your states location and your components which need a certain part of the state will increase.

This leads to prop drilling, meaning passing props through components which don’t need the props but their children do. You want to avoid this because it increases the complexity, for example during a refactoring.

Context API

The Context API was added to React in version 16.3.0 earlier this year. Context provides a way to pass data through the component tree without having to pass props down manually at every level.

When to Use Context ?

Context is designed to share data that can be considered global for a tree of React components, such as the current authenticated user, theme, or preferred language.

 
const ThemeContext = React.createContext('light');
​
class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
​
const Toolbar = () => (
  <View>
    <ThemedButton />
  </View>
)
​
class ThemedButton extends React.Component {
  static contextType = ThemeContext;
​
  render() {
    return <Button theme={this.context} />;
  }
}

Redux

Install the dependencies

 
yarn add redux react-redux redux-persist redux-thunk
​
# or
# npm install redux react-redux redux-persist redux-thunk --save

 
yarn add -D redux-logger

Use Redux

root/index.js

 
import React from 'react';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
​
import { store, persistor } from './store/store';
​
AppRegistry.registerComponent(
  appName, () => (
    <Provider {...store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  )
);

root/App.js

 
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
​
class Counter extends Component {
  render() {
    return (
      <View>
        <Text>Counter</Text>
        <TouchableOpacity onPress={() => this.props.increaseCounter()}>
          <Text>+</Text>
        </TouchableOpacity>
        <Text>{this.props.counter}</Text>
        <TouchableOpacity onPress={() => this.props.decreaseCounter()}>
          <Text>-</Text>
        </TouchableOpacity>
      </View>
    )
  }
}
​
// Map State To Props (Redux Store Passes State To Component)
const mapStateToProps = state => {
  return {
    counter: state.counterReducer.counter,
  };
};
​
const mapDispatchToProps = dispatch => {
  return {
    // Increase Counter
    increaseCounter: payload => dispatch({
      type: 'INCREASE_COUNTER',
      payload: payload,
    }),
    // Decrease Counter
    decreaseCounter: payload => dispatch({
      type: 'DECREASE_COUNTER',
      payload: payload,
    }),
  };
};
​
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

root/store/store.js

 
import AsyncStorage from '@react-native-community/async-storage';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import { persistStore, persistReducer } from 'redux-persist';
​
import rootReducer from '../reducers/index';
​
const middleware = [thunk];
​
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger());
}
​
const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: [
    'authReducer',
  ],
  blacklist: [
    'counterReducer',
  ],
};
​
const persistedReducer = persistReducer(
  persistConfig, rootReducer
);
​
const store = createStore(
  persistedReducer,
  applyMiddleware(...middleware),
);
​
const persistor = persistStore(store);
​
export {
  store,
  persistor,
};

root/reducers/counterReducer.js

 
const initialState = {
  counter: 0,
};
​
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREASE_COUNTER': {
      return {
        ...state,
        counter: state.counter + 1,
      }
    }
    case 'DECREASE_COUNTER': {
      return {
        ...state,
        counter: state.counter - 1,
      }
    }
    default: {
      return state;
    }
  }
};
​
export default counterReducer;

root/reducers/index.js

 
import { combineReducers } from 'redux';
​
import counterReducer from './counterReducer';
​
const rootReducer = combineReducers({
  counterReducer: counterReducer,
});
​
export default rootReducer;

Mobx

Install the dependencies we will need: mobx and mobx-react

 
yarn add mobx mobx-react
# or
# npm i mobx mobx-react --save

We will also need to install a babel plugin so we can use ES7 decorators:

 
# If you are using version 0.56.0 or newer of React Native
yarn add -D @babel/plugin-proposal-decorators
​
# or
# yarn add -D babel-plugin-transform-decorators-legacy

Let’s update the .babelrc file to configure our babel plugins

 
{
 "presets": ["react-native"],
 "plugins": ["transform-decorators-legacy"]
}
​
// or if RN > 0.56.0
{
 "presets": [
   "module:metro-react-native-babel-preset"
 ],
 "plugins": [
   [
     "@babel/plugin-proposal-decorators",
     {
       "legacy": true
     }
   ]
 ]
}

Use mobx

root/stores/orderLineStore.js

 
import { observable, computed } from 'mobx';
​
class OrderLine {
​
  @observable price = 3000;
  @observable amount = 1;
​
  @computed get total() {
    return this.price * this.amount;
  }
​
};
​
const self = new OrderLine();
export default self;

root/stores/index.js

 
import orderLineStore from './orderLineStore';
​
const stores = {
  orderLine: orderLineStore,
};
​
export default stores;

Add Provider for application in index.js

 
// root/index.js
...
import { Provider } from 'mobx-react';
import stores from './stores';
​
AppRegistry.registerComponent(
  appName, () => (
    <Provider {...stores}>
      <App />
    </Provider>
  )
);

root/App.js

 
import React from 'react';
import { View, Text } from 'react-native';
import { observer, inject } from 'mobx-react';
​
@inject(({ orderLine }) => ({
  total: orderLine.total,
}))
​
@observer
class App extends React.Component {
​
  render() {
    return (
      <View>
        <Text>OrderLine {this.props.total} from store.</Text>
      </View>
    );
  }
}
​
export default App;

VSCode warning

When I was setting up new React and Mobx project from scratch, I was getting the following warning in VSCode.

Experimental support for decorators is a feature that is subject to change in a future release. Set the experimentalDecorators option to remove this warning.

Create jsconfig.json file in the root directory of your project and include the following options.

 
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}