);
}
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 と 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 (