React context APIを触ってみた - 個性は次々死んでいく

元ネタ

React v16.3でcontext APIというものが入った

このAPIを使うとReduxと同じようなデータフローを簡単につくれるらしい

記事中にわかりやすい説明があるので動かしてみた

環境構築

create-react-app をベースに使う

$ npx create-react-app my-app

ちなみに npx は、グローバルインストールして使うようなnpmコマンドを落とさず、その場限りで実行させられるお手軽なツール

普通に create-react-app my-app やっても良い

www.npmjs.com

この記事を書いてる現時点だと、Reactのバージョンがv16.2なので手動でアップグレードする

$ yarn add react@16.3.0-alpha.1 react-dom@16.3.0-alpha.1

動かしてみる

わかりやすくApp.jsにまとめて書く

<Provider>で渡したvalueが、その内部で書いた<Consumer>に渡ってくる感じ

import React, { createContext } from 'react'

// context api
const Context = createContext()
const { Provider, Consumer } = Context

class App extends React.Component {
  state = {
    count: 0
  }

  render() {
    return (
      <Provider
        value={{ // 共有したい値を渡す
          state: this.state,
          actions: {
            increment: () => this.setState({ count: this.state.count + 1 }),
            decrement: () => this.setState({ count: this.state.count - 1 })
          }
        }}
      >
        <Counter />
      </Provider>
    )
  }
}

const Counter = () => (
  <Consumer>
    {({ state, actions }) => ( // Providerで渡したvalueがそのまま返ってくる
      <div>
        <span>{state.count}</span>
        <button onClick={actions.increment}>+1</button>
        <button onClick={actions.decrement}>-1</button>
      </div>
    )}
  </Consumer>
)

export default App

// index.js
// ReactDOM.render(<App />, document.getElementById('root'));