【Redux初心者向け】Redux、挫折しないで！

はじめに

Reactがある程度分かっていたら、次に触れるのはReduxではないでしょうか。
Githubとかのサンプルプロジェクトを見てもReduxなしのReactはほとんどありません。

しかし、Reduxは難しい！！
その上、メリットはよく分からなかったので、挫折しそうになった時はありました。

なんとか乗り越えた(??)のでこれからReduxを勉強しようとする人に役に立てるかと思い、自分のためのメモにもなりますので、この記事を書きました。

Redux、挫折しないで！！

対象

Reactが一通り分かって、これからReduxを勉強しようとする人

そもそもReduxって何？

とりあえず、データを管理するためのものだと、考えれば良いかと思います。

なぜReduxは要るのか？

Reduxの公式サイトとか、参考資料とか見たら、色々メリットが書いてありますが、正直よく分からないし、Redux初心者だと、実感できるはずもありません。

難しい、しかも学ぶ意味があるのか分かりません。だから、挫折しやすいです。
が、Reactが一通り分かる段階でも、実感できるReduxの恩恵はあります。
それはコンポーネント間のデータやりとりです。

Reduxなしの場合

ご存知の通り、Reactで唯一のデータの通信方法は親から子に渡すpropsです。
子から親に情報を送りたい場合、無理やり親から子にcallbackをprops経由で渡す、しかないです。

同じレベルのコンポーネントでデータを送る手段は、ありません。

例を見ましょう。

fromParentToChildren

class Parent extends React.Component {
  constructor(props){
    this.state = {
      parentData : 1
    }
  }
  render() {
    return (
      <Children childrenData={this.state.parentData} >
    );
  }
}

class Children extends React.Component {
  render() {
    return (
      <div>{this.props.childrenData}</div>
    );
  }
}

fromChildrenToParent

class Parent extends React.Component {
  constructor(props){
    this.state = {
      parentData : 1
    }
  }
  render() {
    return (
      <Children updateData={(data) => {this.setState({ parenData : data })}}/>
    );
  }
}

class Children extends React.Component {
  render() {
    return (
      <button onClick={() => this.props.updateData(3)}>Click to update data</button>
    );
  }
}

こんな感じでやり取りはできますが、想像してみてください。親子関係が複雑なアプリでしたら、どうなるのか。

例えば、C -> B -> A <- D <- E というコンポーネントツリーの場合、EからCにデータを送るために、E => D => A => B => Cという回り道になります。

話にならん！

Reduxを使ったらどうなる？

Reduxを導入することによって、共通のStateがあり、やり取りしたいデータをそこに入れれば良いです。

例えば、C -> B -> A <- D <- E のコンポーネントツリーで、EからCにデータを送りたい場合、こんな感じでできます。
(Reduxとの接続は省略します)

EComponent

class E extends React.Component {
  increment(){
    // 共有StateのcommonDataを操作
  }
  render() {
    return (
      <button onClick={this.increment}>Click to increment</button>
    );
  }
}

CComponent

class C extends React.Component {
  render() {
    return (
      <div>{this.props.commonData}</div>
    );
  }
}

Eで操作したcommonDataと、Cに表示するcommonDataとは、同じものです。ということは、EからCに簡単にデータやり取りはできてしまうのです。

Redux、役に立っているでしょう(笑)。

システムが大きくなると、Reduxの有り難みをもっと実感できるはずです。

終わりに

Redux、役に立ちます。
難しいかもしれませんが、挫折はしないでください(笑)。