abdulazeez

I'm a software developer using JavaScript to implement every instance of life into software.

Software Developer and Student

Abdulazeez Adeshina



**TL;DR:** In this article, you will learn how to develop a beautiful splash screen for your React apps. This screen will help users understand that your app is loading important data and that it is not stuck. If you need, you can check [the final code developed throughout this article in the `splash-screen` branch of this GitHub repository](https://github.com/auth0-blog/react-splash-screen/tree/splash-screen).

---

## Prerequisites

To follow this article along, you are expected to have some prior knowledge around JavaScript and React. If you don't have previous experience with React, you can [check out this article to learn, from scratch, how to build and secure React apps](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/).

Besides this knowledge, you are expected to have both NPM and Node.js installed in your machine. If you don't have them, please, [check out this page to install both](https://nodejs.org/en/download/).

<include src="TweetQuote" quoteText="Learn how to take advantage of high-order components to create a nice splash screen for your React apps."/>

## Splash Screens

As defined on Wikipedia, [a splash screen is a graphical control element consisting of a window containing an image, a logo, and the current version of the software, and it usually appears while a game or program is launching](https://en.wikipedia.org/wiki/Splash_screen). The main goal of a splash screen is to make your users aware that the program is in a state where it is loading important data before they can start using the program.

You may wonder, "do I need a splash screen in my React app?" The answer, like always, is "it depends." If your React app doesn't need more than a few milliseconds to be ready, then you probably don't need a splash screen. However, there are times where your app needs to load some data or work on some process that is so important that it doesn't really make sense to show anything before it finishes. In these cases, your app (and mainly your users) might benefit from a nice splash screen.

In this article, you will clone a React app from GitHub that faces this exact scenario. In order to be useful, the React app that you will clone needs to create/check sessions into two different providers: Firebase and Auth0. Firebase provides, among other things, a real-time database that might require an authenticated user before accepting requests (that's the case of the React app that you will work on). Auth0, which is an identity service, enables users to authenticate into your apps and might need half a second to check for user sessions.

As you can see, in this React app, both services need some time to initialize a session before enabling users to go on. This situation, by itself, would already be a good scenario to implement a splash screen in a React app. However, what makes it even a better scenario for splash screens is the fact that Firebase can only initialize a session after Auth0 finishes initializing its own. [This is so because Firebase uses Auth0 users to authenticate](https://auth0.com/blog/developing-real-time-apps-with-firebase-and-firestore/). So, there is no way to initialize both in parallel.

### Splash Screens on React Apps

The best way to develop a splash screen for your React app is to define it as a [High-Order Component (HOC)](https://reactjs.org/docs/higher-order-components.html). If you don't know what a HOC is or how to use it, don't worry. As you will see while developing your splash screen, the approach and the concept are quite simple. However, you might benefit from the official definition of HOCs:

> A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.—[React](https://reactjs.org/docs/higher-order-components.html).

That is, a HOC is nothing more than a function that gets another component as a parameter and that, depending on the situation, generates a new component with different capabilities. In this case, you will create a HOC that will get a component (your whole app) and that will return a splash screen while the app is loading the desired state. Then, when the app finishes loading this state, your component will allow it to render and it will hide the splash screen.

## Developing a Splash Screen for Your React Apps

Now that you know why you might need a splash screen in your React apps and that you know (conceptually) how you would implement it, it is time to see the whole concept in action. So, as mentioned before, you will start by cloning a pre-existing React app that suffers from a not-that-fast loading time. To do so, open a terminal, move into the directory where you usually save your projects, and execute the following commands:

```bash
# clone the sample
git clone https://github.com/auth0-blog/react-splash-screen

# move into the cloned app
cd react-splashscreen

# install all dependencies
npm install

# run the application
export REACT_APP_AUTH0_DOMAIN=blog-samples.auth0.com
export REACT_APP_AUTH0_CLIENT_ID=6QfrEoazULfAssc0NqqGhfKkb7mumsCJ
export REACT_APP_AUTH0_REDIRECT_URI=http://localhost:3000
npm start
```

> **Note:** The `export` commands above create environment variables with details of a demo Auth0 account. If you do have your own account, [you can create a SPA in your Auth0 dashboard and replace the environment variables above with your its details](https://auth0.com/docs/quickstart/spa/react/01-login#get-your-application-keys).

The last command will make your app run and will open it on your default web browser (i.e., it will open [`http://localhost:3000`](http://localhost:3000) in your browser).

![Basic React app without a splash screen.](https://images.ctfassets.net/23aumh6u8s0i/4h7ejaItmktsbWOqSRifwf/ac9967c2208a99a7dd5accd2410a9484/react-app)

Now, as you can see, in the beginning, the app provides nothing else than a _log in_ button. If you click on this button, the app will redirect you to the Auth0 Login Page where you will be able to authenticate yourself. After authenticating, Auth0 will redirect you back to your app (i.e., to `http://localhost:3000`) where you will face the following behavior: at the very moment that you arrive at the app, you will see the same exact screen as you saw before logging in (with the _log in_ button). Then, after a second or two, you will notice that the screen "blinks" (gets updated) and that now it shows your name, a _log out_ button, and a list of books.

![Basic React app after authentication.](https://images.ctfassets.net/23aumh6u8s0i/7zKBJf4WX1mszQCAahCrLg/85d0f79ed89c80e4be7bf6e015df02f3/react-app-with-a-logged-in-user)

While your app was loading your session and loading the list of books, it was showing a wrong state. By looking at the app for a second, you and your users might feel that you are not actually logged in, and that something went wrong. To solve this problem, you will add a splash screen in your app that will correctly inform your users that the app is loading.

### Adding the Splash Screen Component

With your app up and running, the next thing you will do is to create a new file called `withSplashScreen.js` under the `./src/components` directory. Notice that this component's name, unlike others, start with a `with` prefix. This is a common pattern among React developers. Every time you are building a HOC, starting its name with `with` is a good practice.

So, after creating this file, you will insert the following code into it:

```js
import React, {Component} from 'react';
import auth0Client from '../Auth';
import './splash-screen.css';

function LoadingMessage() {
  return (
    <div className="splash-screen">
      Wait a moment while we load your app.
      <div className="loading-dot">.</div>
    </div>
  );
}

function withSplashScreen(WrappedComponent) {
  return class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        loading: true,
      };
    }

    async componentDidMount() {
      try {
        await auth0Client.loadSession();
        setTimeout(() => {
          this.setState({
            loading: false,
          });
        }, 1500)
      } catch (err) {
        console.log(err);
        this.setState({
          loading: false,
        });
      }
    }

    render() {
      // while checking user session, show "loading" message
      if (this.state.loading) return LoadingMessage();

      // otherwise, show the desired route
      return <WrappedComponent {...this.props} />;
    }
  };
}

export default withSplashScreen;
```

As you can see, this file defines two functions:

- `LoadingMessage`: This is the component that the HOC will show while it is loading everything needed to make your React app run.
- `withSplashScreen`: This is the high-order component itself.

This HOC gets a parameter called `WrappedComponent` so it can know what the app is trying to render. Then, when the HOC mounts on the screen (i.e., when React calls the `componentDidMount` method), this component triggers a call to `auth0Client.loadSession` to load the user session (if any) from Auth0. If the component manages to load a session from Auth0, this function triggers a call to `setTimeout` with a 1.5 seconds delay (`setTimeout(() => {...}, 1500)`).

> **Note:** This timeout is actually representing what would happen in the real-world application. That is, this timeout is replacing the call to a Firebase SDK so you don't have to set up a Firebase account by yourself and we don't have to share ours publicly. If you want [to learn how to use Firebase and Auth0 together to create real-time web apps, check out this article](https://auth0.com/blog/developing-real-time-apps-with-firebase-and-firestore/).

During this delay, the `withSplashScreen` HOC will replace the component that the app wants to render (i.e., the `WrappedComponent`) by the `LoadingMessage` component. After the app finishes loading what is needed, the HOC component will change the value of the `loading` state (`loading: false`) causing a re-render that will result on the app rendering the `WrappedComponent` instead of the loading message.

One important characteristic about the `componentDidMount` function is that, if the user has no session at Auth0, the call to `auth0Client.loadSession` will fail almost instantaneously and the splash screen will go away fast.

Now, if you take a closer look at the current version of the `App.js` file, you will see that this component contains a similar function called `componentDidMount`. What you are doing is to actually move away from the `loadSession` process from the `App.js` file to the new `withSplashScreen` component. As such, you will have to remove this method, which will make your `App.js` file look like this:

```js
import React, {Component, Fragment} from 'react';
import {Route} from 'react-router-dom'
import NavBar from './components/NavBar';
import Welcome from './components/Welcome';

class App extends Component {
  render() {
    return (
      <Fragment>
        <NavBar />
        <div className="container-fluid">
          <Route path="/" exact component={Welcome} />
        </div>
      </Fragment>
    );
  }
}

export default App;
```

However, you haven't made use of the `withSplashScreen` HOC yet. To do so, you will update this same file one more time:

```js
// ... other import statements ...
import withSplashScreen from './components/withSplashScreen';

// ... App class definition ...

// replace the last line so you pass App as a parameter to withSplashScreen
export default withSplashScreen(App);
```

> **Note**: Calling `withSplashScreen(App)` makes the `WrappedComponent` parameter of the `withSplashScreen` component point to `App`. As such, after finishing its job, the splash screen will end up rendering your `App` component.

With that in place, you are almost done. The last thing you will need to do is to create some CSS rules to make your splash screen look nice. If you take a look back into the `withSplashScreen.js` file, you will notice that there is an `import` statement there that tries to load a file called `splash-screen.css` from the same directory. As such, you will create this file now and add the following CSS rules to it:

```css
.splash-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.splash-screen .loading-dot {
  font-size: 100px;
  margin-top: -80px;
  position: relative;
  animation: ease-in-out infinite alternate;
  animation-name: run;
  animation-duration: 1.2s;
}

@keyframes run {
  0% {
    left: -90px;
    color: #eee;
  }
  50% {
    color: #666;
  }
  100% {
    left: 90px;
    color: #eee;
  }
}
```

That's it! You just finished creating a nice splash screen HOC to attach to your React app. To see it in action, you can simply reload your browser and, if you already logged in before, you will see the splash screen for 1.5 seconds or so (i.e., for the duration of the `auth0Client.loadSession()` call plus the `1500` milliseconds passed to `setTimeout`).

![React app showing a splash screen to improve user experience.](https://images.ctfassets.net/23aumh6u8s0i/3Vpmz9tPAaiPRyDYzzNeMF/d8872fa526dc4e0b96cb3c0372acba6b/splash-screen-showing-loading-message)

Cool, isn't it?

<include src="TweetQuote" quoteText="I just learned how to create a nice splash screen for my React apps."/>

<include src="asides/JavascriptAtAuth0" />

## Conclusion

Throughout this short article, you learned how to make use of High-Order Component to add splash screens to your React apps. The approach is quite easy and you can apply the concept to any React app (or any component-based UI library for that matter). I hope you enjoyed the article and that you got valuable information from it. Happy hacking!


Creating a Splash Screen for Your React Apps



**TL;DR:** The React Context API isn't a new thing on React's ecosystem. However, the React's `16.3.0` release [brought a lot of improvements to this API](https://auth0.com/blog/whats-new-in-react-16-3/). These improvements are so overwhelming that they greatly reduce the need for Redux and other advanced state management libraries. In this article, you will learn, through a practical tutorial, how the new React Context API replaces the need for Redux on small React applications.

<include src="TweetQuote" quoteText = "Learn how to migrate from Redux to the new React Context API in this practical tutorial."/>

## Quick Review on Redux

Before diving into the React Context API, we need to do a quick review on Redux, so we can compare both. [Redux is a JavaScript library that facilitates state management](https://redux.js.org). Redux is not tied to React itself. Developers from all around the world have been using Redux with popular JavaScript frontend frameworks such as _React_ and _Angular_.

To be clear, in this context, state management means handling changes that occur upon a particular event that occurs on a Single Page App (SPA). For example, events like the click of a button or an async message coming from the server can trigger changes to the app's state.

In Redux, particularly, there are a few things that you have to keep in mind:

1. The state of the entire app is stored in a single object (known as the source of truth).
2. To change the state, you need to dispatch `actions` that describes what needs to happen.
3. You cannot change properties of objects or make changes to existing arrays. In Redux, you must always return a new reference to a new object or a new array.

If you are not familiar with Redux and you want to learn more, please, check [this practical tutorial on Redux](https://auth0.com/blog/redux-practical-tutorial/).

## React Context API Introduction

The React Context API provides a way to pass data through the component tree without having to pass `props` down manually to every level. In React, data is often passed from a parent to its child component as a property.

Using the new React Context API depends on three main steps:

1. Passing the initial state to `React.createContext`. This function then returns an object with a `Provider` and a `Consumer`.
2. Using the `Provider` component at the top of the tree and making it accept a prop called `value`. This value can be anything!
3. Using the `Consumer` component anywhere below the Provider in the component tree to get a subset of the state.

As you can see, the concepts involved are actually not that different from Redux. The fact is, even Redux uses the React Context API underneath its public API. However, only recently the Context API reached a level of maturity high enough to be used in the wild.

## Creating a React App with Redux

As mentioned, the goal of this article is to show you how the new Context API can replace Redux for small apps. Therefore, you will start by creating a simple React app with Redux and, after that, you will learn how to remove this state management library so you can take advantage of the React Context API.

The sample application you will build is an app that handles a list of some popular foods and their origin. This app will also include a search functionality to enable users to filter the list based on some keyword.

In the end, you will have an app that looks like this:

### Project Requirements

As this article uses only React and some NPM libraries, you will need nothing else than Node.js and NPM installed in your development machine. If you don't have Node.js and NPM yet, check out the [official installation procedures](https://nodejs.org/en/download/) to install both.

After installing these dependencies, you will need to install the `create-react-app` tool. This tool helps developers getting started with React. So, to install it, open a terminal and run the following command:

```bash
npm i -g create-react-app
```

### Scaffolding the React App

With `create-react-app` installed, you will have to move to the directory where you want to put your project and execute the following command:

```bash
create-react-app redux-vs-context
```

After a few seconds, `create-react-app` will have finished creating your app. So, after that, you can move into the new directory created by this tool and install Redux:

```bash
# move into your project
cd redux-vs-context

# install Redux
npm i --save redux react-redux
```

> **Note:** `redux` is the main library and `react-redux` is a library that facilitates the interaction between React and Redux. In short, the latter acts as a proxy between React and Redux.

### Developing React Apps with Redux

Now that you have your React app structured and that you installed Redux, open your project in your preferred IDE. From there, you will create three files into the `src` directory:

- `foods.json`: This file will hold a static array of foods and their origin.
- `reducers.js`: This file will manage the state of the Redux version of your app.
- `actions.js`: This file that will hold the functions that will trigger changes in the state of the Redux version of your app.

So, to start, you can open the `foods.json` file and add the following content to it:

```json
[
  {
    "name": "Chinese Rice",
    "origin": "China",
    "continent": "Asia"
  },
  {
    "name": "Amala",
    "origin": "Nigeria",
    "continent": "Africa"
  },
  {
    "name": "Banku",
    "origin": "Ghana",
    "continent": "Africa"
  },
  {
    "name": "Pão de Queijo",
    "origin": "Brazil",
    "continent": "South America"
  },
  {
    "name": "Ewa Agoyin",
    "origin": "Nigeria",
    "continent": "Africa"
  }
]
```

As you can see, there is nothing special about this file. It is just an array of different food from different countries.

After defining the `foods.json` file, you can focus on defining your Redux store. To recap, the `store` is the place where you keep the single source of truth of the state of your app. So, open the `reducers.js` file and add the following code to it:

```js
import Food from './foods';

const initialState = {
  food: Food,
  searchTerm: '',
};

export default function reducer(state = initialState, action) {
  // switch between the action type
  switch (action.type) {
    case 'SEARCH_INPUT_CHANGED':
      const {searchTerm} = action.payload;
      return {
        ...state,
        searchTerm: searchTerm,
        food: searchTerm ? Food.filter(
          (food) => (food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1)
        ) : Food,
      };
    default:
      return state;
  }
}
```

In the code above, you can see that the `reducer` function receives two parameters: `state` and `action`. When you start your React application, this function will get the `initialState` defined right before it and, when you dispatch instances of an action, this function will get the current state (not the `initialState` anymore). Then, based on the contents of these actions, the `reducer` function will generate a new state for your app.

Next, you have to define what these actions are. Actually, to keep things simple, you will define a single action that will be triggered when users input a search term in your app. So, open the `actions.js` file and insert the following code into it:

```js
function searchTermChanged(searchTerm) {
  return {
    type: 'SEARCH_INPUT_CHANGED',
    payload: {searchTerm},
  };
}

export default {
  searchTermChanged,
};
```

With this `action` creator in place, the next thing you need to do is to wrap your `App` component into the `Provider` component that is available on `react-redux`. This provider is responsible for making your single source of truth (i.e., the `store`) to your React app.

To use this provider, first, you will create your app's `store` using the `initialState` defined in the `reducers.js` file. Then, you will pass this `store` to your `App` with the help of `Provider`. To accomplish these tasks, you will have to open the `index.js` file and replace its contents with:

```js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducers from './reducers';
import App from './App';

// Creating the store using the reducers info.
// That's because reducers are the building blocks of a Redux Store.
const store = createStore(reducers);

ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);
```

That's it! You just finished configuring Redux in your React app. Now, you have to implement the UI (User Interface), so your users can use the features implemented in this section.

### Building the React Interface

Now that you have the core of your application ready to go, you can focus on building your user interface. For that, open your `App.js` file and replace its contents with this:

```js
import React from 'react';
import {connect} from 'react-redux';
import actions from './actions';
import './App.css';

function App({food, searchTerm, searchTermChanged}) {
  return (
    <div>
      <div className="search">
        <input
          type="text"
          name="search"
          placeholder="Search"
          value={searchTerm}
          onChange={e => searchTermChanged(e.target.value)}
        />
      </div>
      <table>
        <thead>
        <tr>
          <th>Name</th>
          <th>Origin</th>
          <th>Continent</th>
        </tr>
        </thead>
        <tbody>
        {food.map(theFood => (
          <tr key={theFood.name}>
            <td>{theFood.name}</td>
            <td>{theFood.origin}</td>
            <td>{theFood.continent}</td>
          </tr>
        ))}
        </tbody>
      </table>
    </div>
  );
}

export default connect(store => store, actions)(App);
```

For those not used to Redux, the only thing that they might not be familiar with is the `connect` function used to encapsulate the `App` component. This function is actually a [High Order Component (HOC)](https://reactjs.org/docs/higher-order-components.html) that acts as the glue between your app and Redux.

If you run your app now, you will be able to use it in your browser:

```bash
npm run start
```

However, as you can see, the app right now is ugly. So, to make it look a little bit better, you can open the `App.css` file and replace its contents with: 

```css
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  line-height: 25px;
}

th {
  background-color: #eee;
}

td, th {
  text-align: center;
}

td:first-child {
  text-align: left;
}

input {
  min-width: 300px;
  border: 1px solid #999;
  border-radius: 2px;
  line-height: 25px;
}
```

![React app implemented with Redux](https://images.ctfassets.net/23aumh6u8s0i/1u1ImuQtARWbJa1nRYqAhW/65c6f6e215d597668ca8d246cd78e204/react-app-with-redux)

Done! You now have a basic React and Redux app and can start learning about how to migrate to the Context API.

## Implementing React Apps with React Context API

In this section, you will learn how to migrate the Redux version of your app to the React Context API.

Fortunately, as you will see, you won't really need to do a lot of refactoring to switch between Redux and the Context API.

For starter, you will have to remove every trace of Redux from your app. For that, go to your terminal and remove both the `redux` and `react-redux` libraries:

```bash
npm rm redux react-redux
```

After that, you can remove the `import` statements that reference these libraries. So, open the `App.js` file and remove these lines:

```js
import {connect} from 'react-redux';
import actions from './actions';
```

Then, still in this file, replace the last line (the one that starts with `export default`) with this:

```js
export default App;
```

With these changes in place, you can rewrite your app with the Context API.

### Migrating from Redux to React Context API

To convert the previous app from a Redux powered app to using the Context API, you will need a context to store the app's data (this context will replace the Redux Store). Also, you will need a `Context.Provider` component which will have a `state`, a `props`, and a normal React component lifecycle.

Therefore, you will need to create a `providers.js` file in the `src` directory and add the following code to it:

```js

import React from 'react';
import Food from './foods';

const DEFAULT_STATE = { allFood: Food, searchTerm: '' };

export const ThemeContext = React.createContext(DEFAULT_STATE);

export default class Provider extends React.Component {
  state = DEFAULT_STATE;
  searchTermChanged = searchTerm => {
    this.setState({searchTerm});
  };

  render() {
    return (
      <ThemeContext.Provider value={{
        ...this.state,
        searchTermChanged: this.searchTermChanged,
      }}> {this.props.children} </ThemeContext.Provider>);
  }
}

```

The `Provider` class defined in the code above is responsible for encapsulating other components inside the `ThemeContext.Provider`. By doing that, you enable these components to have access to your app's state and to the `searchTermChanged` function that provides a way to change this state.

To consume these values later in the component tree, you will need to initiate a `ThemeContext.Consumer` component. This component will need a render function that will receive the above value `props` as arguments to use at will.

So, next, you need to create a filed called `consumer.js` in the `src` directory and write the following code into it:

```js

import React from 'react';
import {ThemeContext} from './providers';

export default class Consumer extends React.Component {
  render() {
    const {children} = this.props;

    return (
      <ThemeContext.Consumer>
        {({allFood, searchTerm, searchTermChanged}) => {
          const food = searchTerm
            ? allFood.filter(
              food =>
                food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
            )
            : allFood;

          return React.Children.map(children, child =>
            React.cloneElement(child, {
              food,
              searchTerm,
              searchTermChanged,
            })
          );
        }}
      </ThemeContext.Consumer>
    );
  }
}

```

Now, to finalize the migration, you will open your `index.js` file, and inside the `render()` function, wrap the `App` component with the `Consumer` component. Also, you will wrap the `Consumer` inside the `Provider` component. Exactly as shown here:

```js
import React from 'react';
import ReactDOM from 'react-dom';
import Provider from './providers';
import Consumer from './consumer';
import App from './App';

ReactDOM.render(
  <Provider>
    <Consumer>
      <App />
    </Consumer>
  </Provider>,
  document.getElementById('root')
);
```

Done! You just finished migrating from Redux to the React Context API. If you run your app now, you will see that the whole thing is working just like before. The difference now is that your app is not using Redux more.

<include src="TweetQuote" quoteText = "The new React Context API s a great alternative to Redux in small React applications."/>

<include src="asides/React" />

## Conclusion

Redux is an **advanced** state management library that should be used when building large scale React apps. The Context API, on the other hand, can be used in small-scale React apps where byte-sized changes are made. By using the Context API, you do not have to write a lot of code such as `reducers`, `actions`, etc. to work out the logic exhibited by state changes. 


React Context API: Managing State with Ease



**TL;DR:** React Context API は React のエコシステムでは新しいものではありません。ただし、React  の  `16.3.0`  リリース では  [API に多くの改善がなされています](https://auth0.com/blog/whats-new-in-react-16-3/)。これら改善は予想以上のもので、Redux やその他高度な状態を管理するライブラリの必要性が大きく提言されます。本書では、実用的なチュートリアルを通して新しい React Context API が小型の React アプリケーションに対する Redux への必要性をどのように置き換えるかを学んでいきます。

<include src="JpTweetQuote" quoteText="この実用的なチュートリアルでどのように Redux から新しい React Context API に移行するかについて学びましょう"/>

## Redux についてのクイックレビュー

React Context API に進む前に、両者を比較できるように Redux についてのクイックレビューをする必要があります。[Redux は状態の管理を容易にする JavaScript ライブラリです](https://redux.js.org/)。Redux は React 自体には結びつきません。世界中の開発者は  React  や  Angular  といった人気の高い JavaScript フロントエンド フレームワークと共に Redux を使ってきました。

誤解のないように言うと、本書で言う状態の管理とはシングルページアプリ（SPA）で発生する特定のイベントが発生したときの変更を処理することです。例えば、ボタンのクリックやサーバーから来る非同期メッセージのようなイベントがアプリの状態への変更をトリガーします。

Redux では、特に、次の点をご留意ください。

1. アプリ全体の状態が単一のオブジェクト（別名「頼できる情報源(Source of truth)」）に格納されます。
2. 状態を変更するには、発生する必要があることを説明する  `actions`  をディスパッチする必要があります。
3. オブジェクトのプロパティを変更したり、既存の配列を変更することはできません。Redux では、新しいオブジェクトまたは新しい配列に常に新しい参照を返さなければなりません。

Redux についてあまりご存知でない方や詳細を学びたい方は、[Redux についての実用的なチュートリアル](https://auth0.com/blog/redux-practical-tutorial/)をご覧ください。

## React Context API の導入

React Context API はあらゆるレベルに手動で `props`  を伝えなくても、コンポーネント ツリーを通してデータを送信する方法を提供します。React では、親コンポーネントからその子コンポーネントにプロパティとして送信されることがよくあります。

新しい React Context API を使うことは次の 3 つのステップによって決まります。

1. 初期状態を `React.createContext` に送ります。この機能は  `Provider`  や  `Consumer`  と共にひとつのオブジェクトを返します。
2. `Provider`  コンポーネントをツリーのトップで使用し、`value`  と呼ばれるプロパティを承諾させます。この値は何でも構いません。
3. 状態のサブセットを取得するために、`Consumer`  コンポーネントをコンポーネント ツリーにあるプロバイダーの下で使います。

ご覧のように、関係する概念は Redux とはそんなに異なりません。実際、Redux はそのパブリック API の下で React Context API を使用します。ただし、最近 Context API は一般人でも十分使用できるほどその成熟度が高まりました。

## React アプリを Redux で作る

前述したように、本書の目的は新しい Context API を小さなアプリ向け Redux と置き換える方法をお伝えすることです。よって、シンプルな React アプリを Redux で作り、その後、React Context API を活用できるようにこの状態管理ライブラリを削除する方法について学んでいきます。

これから構築するシンプルなアプリケーションは人気の高い食べ物やその起源のリストを処理するアプリです。このアプリには、ユーザーがあるキーワードを基にしたリストをフィルターできる検索機能も含まれています。

最終的に、次のようなアプリになります。

### プロジェクトの要件

本書では React と一部の NPM ライブラリのみを使用しますので、開発マシンには Node.js と NPM がインストールされていれば大丈夫です。Node.js や NPM がまだインストールされていない場合は、[公式のインストール手順](https://nodejs.org/en/download/)をご覧いただき、両方をインストールしてください。

これら依存関係をインストールしたら、`create-react-app`  ツールをインストールする必要があります。このツールは開発者が React で作業を開始するときに役立ちます。ですから、これをインストールするには、端末を開いて、次のコマンドを実行します。

```bash
npm i -g create-react-app
```

### React アプリをスキャフォールディングする

`create-react-app`  をインストールしたら、プロジェクトを配置するディレクトリを移動し、次のコマンドを実行します。

```bash
create-react-app redux-vs-context
```

数秒後、`create-react-app`  がアプリの作成を終えます。その後、このツールで作成した新しいディレクトリに移動し、Redux をインストールします。

```bash

# プロジェクトに移動します
cd redux-vs-context

# Redux をインストールします
npm i --save redux react-redux
```

**注：** `redux`  はメインライブラリで、`react-redux`  は React と Redux の間の対話を容易にするライブラリです。簡単に言うと、後者は React と Redux の間でプロキシとして機能します。

### React アプリを Redux で作る

これで React アプリの構成ができ、Redux をインストールしたので、お好みの IDE でプロジェクトを開きます。そこから、次の３つのファイルを  **src**  ディレクトリに創ります。

- `foods.json`：このファイルは食べ物の静的配列とその起源を保持します。
- `reducers.js`：このファイルはアプリの Redux バージョンの状態を管理します。
- `actions.js`：このファイルはアプリの Redux バージョンの状態で変更ををトリガーする機能を保持します。

では、始めるには  `foods.json`  ファイルを開き、次のコンテンツをそれに加えます。

```json
[
  {
    "name": "Chinese Rice",
    "origin": "China",
    "continent": "Asia"
  },
  {
    "name": "Amala",
    "origin": "Nigeria",
    "continent": "Africa"
  },
  {
    "name": "Banku",
    "origin": "Ghana",
    "continent": "Africa"
  },
  {
    "name": "Pão de Queijo",
    "origin": "Brazil",
    "continent": "South America"
  },
  {
    "name": "Ewa Agoyin",
    "origin": "Nigeria",
    "continent": "Africa"
  }
]
```

ご覧のように、このファイルには特に特別なものはありません。単なる異なる国の異なる食べ物の配列です。

`Foods.json`  ファイルを定義した後、Redux ストアを定義することを重点的に取り組みます。まとめると、`store`  はアプリの状態の信頼できる唯一の情報源（Single source of truth）を保持する場所です。そこで、`reducers.js`  ファイルを開き、次のコードを加えます。

```javascript
import Food from "./foods";

const initialState = {
  food: Food,
  searchTerm: ""
};

export default function reducer(state = initialState, action) {
  // アクションの種類によって切り替えます
  switch (action.type) {
    case "SEARCH_INPUT_CHANGED":
      const { searchTerm } = action.payload;
      return {
        ...state,
        searchTerm: searchTerm,
        food: searchTerm
          ? Food.filter(
              food =>
                food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
            )
          : Food
      };
    default:
      return state;
  }
}
```

上記のコードでは、ご覧のように `state`  と  `action`  の２つのパラメーターを受ける  `reducer`  機能があります。React アプリケーションを始めるとき、この機能はその直前で定義された  `initialState`  を取得し、アクションのインスタンスをディスパッチするとき、この機能は現在の状態（もはや  initialState  ではない）を取得します。それから、これらアクションのコンテンツを基に、`reducer`  機能はアプリの新しい状態を作ります。

次に、これらアクションが何かを定義します。実際、これをシンプルにするには、ユーザーがアプリに検索語句を入力したときにトリガーする１つのアクションを定義します。そこで  `actions.js`  ファイルを開き、次のコードを挿入します。

```javascript
function searchTermChanged(searchTerm) {
  return {
    type: "SEARCH_INPUT_CHANGED",
    payload: { searchTerm }
  };
}

export default {
  searchTermChanged
};
```

これで  `action`  クリエータができましたから、次にやることは  `react-redux`  で利用可能な  `App`  コンポーネントを  `Provider`  コンポーネントにラップすることです。このプロバイダーは React アプリを信頼できる唯一の情報源（Single source of truth）（例：`store`）にする担当です。

このプロバイダーを使うには、まず、`reducers.js`  ファイルで定義された  `initialState`  を使ってアプリの  `store`  を作ります。それからこの  `store`  を  `Provider`  の助けを得て  App  に送ります。これら作業を達成するには、`index.js`  ファイルを開き、そのコンテンツと次を置き換えます。

```javascript
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./reducers";
import App from "./App";

// Rducer 情報を使ってストアを作ります。
// それは Rducer が Redux Store の文書パーツだからです。
const store = createStore(reducers);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);
```

これだけです！これで React アプリに Redux を構成し終えました。ここで、UI（ユーザー インターフェイス）を実装しますから、ユーザーはこの章で実装される機能を使用します。

### React インターフェイスを構築する

これでアプリケーションのコアが出来上がったので、ユーザー インターフェイスの構築に取り組みます。そのためには  `App.js`  ファイルを開き、そのコンテンツと次を置き換えます。

```javascript
import React from "react";
import { connect } from "react-redux";
import actions from "./actions";
import "./App.css";

function App({ food, searchTerm, searchTermChanged }) {
  return (
    <div>
      <div className="search">
        <input
          type="text"
          name="search"
          placeholder="Search"
          value={searchTerm}
          onChange={e => searchTermChanged(e.target.value)}
        />
      </div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Origin</th>
            <th>Continent</th>
          </tr>
        </thead>
        <tbody>
          {food.map(theFood => (
            <tr key={theFood.name}>
              <td>{theFood.name}</td>
              <td>{theFood.origin}</td>
              <td>{theFood.continent}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default connect(
  store => store,
  actions
)(App);
```

Redux を使ったことがない方がご存知ないかもしれないのは  `App`  コンポーネントをカプセル化するために使用する  `connect`  機能だけです。この機能は[高次コンポーネント（HOC)](https://reactjs.org/docs/higher-order-components.html) で、アプリと Redux  をつなげる接着剤のような役目を果たします。

ここでアプリを実行すれば、ブラウザーで使用できます。

```bash
npm run start
```

ただし、ご覧のようにアプリの見掛けはよくありません。そこで、それを改善するために、`App.css`  ファイルを開き、そのコンテンツと次を置き換えます。

```css
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  line-height: 25px;
}

th {
  background-color: #eee;
}

td,
th {
  text-align: center;
}

td:first-child {
  text-align: left;
}

input {
  min-width: 300px;
  border: 1px solid #999;
  border-radius: 2px;
  line-height: 25px;
}
```

![React app implemented with Redux](https://images.ctfassets.net/23aumh6u8s0i/1u1ImuQtARWbJa1nRYqAhW/65c6f6e215d597668ca8d246cd78e204/react-app-with-redux)

これだけです！これで基本的な React と Redux のアプリができたので、Context API をどのように移行するかについて学びます。

## React アプリを React Context API で実装する

本章では、アプリの Redux バージョンを React Context API に移行する方法について学んでいきます。

幸運なことに、ご覧のように、Redux と Context API 間を切り替えて何度もリファクタリングする必要はありません。

初心者のために、アプリから Redux のあらゆるトレースを削除する必要があります。そのためには、端末から  `redux`  と  `react-redux`  のライブラリを両方とも削除します。

```bash
npm rm redux react-redux
```

その後、これらライブラリを参照する  `import`  ステートメントを削除します。ですから  `App.js`  ファイルを開き、次の行を削除します。

```javascript
import { connect } from "react-redux";
import actions from "./actions";
```

それから、このファイルの最後の行（`export default` で始まる行）と次を置き換えます。

```javascript
export default App;
```

これら変更が終わったら、Context API でアプリを再書き込みします。

### Redux から React Context API へ移行する

Redux を利用した元のアプリから Context API を利用するアプリに変えるには、アプリのデータを格納するコンテキストが必要です（このコンテキストが Redux Store を置き換えます）。また、`state`、`props`、および通常の React コンポーネント ライフサイクルがある `Context.Provider`  コンポーネントが必要です。

よって、`src`  ディレクトリに  `providers.js`  ファイルを作り、次のコードを加えます。

```js

import React from 'react';
import Food from './foods';

const DEFAULT_STATE = { allFood: Food, searchTerm: '' };

export const ThemeContext = React.createContext(DEFAULT_STATE);

export default class Provider extends React.Component {
  state = DEFAULT_STATE;
  searchTermChanged = searchTerm => {
    this.setState({searchTerm});
  };

  render() {
    return (
      <ThemeContext.Provider value={{
        ...this.state,
        searchTermChanged: this.searchTermChanged,
      }}> {this.props.children} </ThemeContext.Provider>);
  }
}

```

上記のコードで定義した  `Provider`  クラスは  `ThemeContext.Provider` 内にその他のコンポーネントをカプセル化する担当です。そうすることで、これらコンポーネントがアプリの状態や、この状態を変更する方法を提供する  `searchTermChanged`  機能にアクセスできます。

コンポーネント ツリーの値を後で消費するには、`ThemeContext.Consumer`  コンポーネントを始める必要があります。このコンポーネントは思いのままに使用する引数として上記の値  `props`  を受けるレンダー関数が必要です。

では、次に、`src`  ディレクトリ内に  `consumer.js`  と呼ばれるファイルを作り、次のコードを書き込みます。

```js

import React from 'react';
import {ThemeContext} from './providers';

export default class Consumer extends React.Component {
  render() {
    const {children} = this.props;

    return (
      <ThemeContext.Consumer>
        {({allFood, searchTerm, searchTermChanged}) => {
          const food = searchTerm
            ? allFood.filter(
              food =>
                food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
            )
            : allFood;

          return React.Children.map(children, child =>
            React.cloneElement(child, {
              food,
              searchTerm,
              searchTermChanged,
            })
          );
        }}
      </ThemeContext.Consumer>
    );
  }
}

```

ここで、移行を終わらせるために、`index.js`  ファイルを開き、 `render()`  関数内で  `App`  コンポーネントを  `Consumer`  コンポーネントでラップします。また、`Provider`  コンポート内で  `Consumer`  をラップします。そうすると、次のようになります。

```javascript
import React from "react";
import ReactDOM from "react-dom";
import Provider from "./providers";
import Consumer from "./consumer";
import App from "./App";

ReactDOM.render(
  <Provider>
    <Consumer>
      <App />
    </Consumer>
  </Provider>,
  document.getElementById("root")
);
```

これだけです！これで Redux から React Context API への移行が終わりました。今、アプリを実行すると、全体が以前のように機能していることが分かります。ここでの違いはアプリは Redux を使っていないということです。

<include src="JpTweetQuote" quoteText="新しい React Context API は小さな React アプリケーションの Redux に代わる素晴らしいものです。"/>

## まとめ

Redux は大規模な React アプリを構築するときに使用すべき、`高度な`状態の管理ライブラリです。一方、Context API は小規模の React アプリで使用でき、バイト サイズで変更が可能です。Context API を使うと、状態の変化が示されたロジックを処理するために `reducers`、`actions` のようなコードをたくさん書く必要がありません。

---


Abdulazeez Adeshina

Creating a Splash Screen for Your React Apps

React Context API: Managing State with Ease

React Context API：状態を簡単に管理する

Try for free today