ReactNativeにReduxの環境構築をしてみる

プロジェクトの作成

$ react-native init redux_test

必要なライブラリのインストール

$ cd redux_test
$ npm install
$ npm install --save redux react-redux

シミュレータ起動

$ rm -rf ios/build
$ react-native run-ios

たまに前ビルドした結果が残っていてエラーになる時があるので、 ios/build以下を消してからシミュレータを実行するようにしています。

こんな画面が出ればOKです。

Reactのコード用のディレクトリを作成

$ mkdir src
$ cd src

Providerコンポーネントを作成

import reducers from './reducers';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { View, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <Provider store={createStore(reducers)}>
        <View>
          <Text>Hello World</Text>
        </View>
      </Provider>
    )
  }
}

Providerコンポーネントのpropsにstoreを渡すことで、Store内に保存されたstateを子のコンポーネントに渡すことができます。

combineReducerの用意

$ mkdir src/reducers
$ touch src/reducers/index.js

import { combineReducers } from 'redux';

export default combineReducers({
  hoge: () => { return { name: 'hoge' } }
});

Reducerが無いとcreateStoreで怒られるので、仮のReducerを用意します。

index.ios.jsとindex.android.jsを書き換え

import {
  AppRegistry,
} from 'react-native';

import App from './src/App';

AppRegistry.registerComponent('redux_test', () => App);

元のコードを全部消して前に定義したApp.jsを読み込むように変更します。

これで上記のように画面の左上にHello Worldが表示されればReduxの最低限の環境構築は完了です。

はてなブログにソースコードを貼り付ける方法

ソースコードはGistで貼っていましたが、Gistにアップロードして それを記事で読み込んでの繰り返しが面倒過ぎたので別の方法を探しました。

結論、Markdownを有効にして```で囲むのが一番手軽でした。

package main

import "fmt"

func main() {
    i := 42
    p := &i
    fmt.Println(*p)
    *p = 84
    fmt.Println(*p)
}

こんな感じになります。

Go言語のチュートリアル備忘録 その1 (Pointer, Struct, Slice)

Go言語の理解には公式チュートリアルを進めるのが一番です。

チュートリアルを進めていてここだけは押さえておきたいという要点をまとめていこうと思います。

A Tour of Go 

Pointer

• Goはポインタを使う。ポインタは変数のメモリアドレスを指す
• &オペレータはそのオペランドへのポインタを引き出す
• *オペレータはポインタの指す先の変数を示す

オペランドとオペレータとは？

• オペランド(operand)は演算の対象となる値や変数、定数のこと
• オペレータ(operator)は+や-等の演算子のこと

Structs

• struct(構造体)はフィールド(field)の集まり
• Goにはクラスが存在しないが、似た役割として構造体が用意されている

構造体をネストさせることで、より複雑な構造を定義することもできる。

masarufuruya.hatenadiary.jp

Pointers to Structs 

Struct Literals

Arrays

配列は固定長。[n]T型は型Tのn個の変数の配列を表す

var a [10]int

Slices

• 可変長配列がない代わりに実装されたもの。[]Tは型Tのスライスを表す。
• スライスは配列への参照のようなもの。スライスの値を変更するとその元の配列の値も変わる

リテラルとは?

• ソースコードに直接べた書きした数値や文字列のこと

構造体のSlice

• よくあるUserの構造体を複数スライスで持つ場合に特定の構造体のみ初期化したい時は次のように書く