React.jsについて勉強してみた(その2:Redux)

この前はReactの勉強してました。

www.nogawanogawa.work

今回はその続きでReduxの使い方について勉強していきます。

今回も参考にした本はこちら。

React.js & Next.js超入門

ということで、今回も勉強したメモです。

状態管理

フロントエンドにおける状態管理というと、有名なのがFluxですね。 Fluxでの状態管理のイメージはこんな感じです。

構成としては、4つのコンポーネントからなっており、

• Dispatchers :
• Stores
• Actions
• Views

となっています。 この辺はVuexを勉強したときにも取り扱ったので、そちらもご参照ください。

www.nogawanogawa.work

Redux

Fluxの概念を踏襲しつつも、Reduxではそれ専用の用語がありますので、そのへんについてはちゃんと知っていおく必要があります。 参考書籍には、概念図のようなものは見当たらなかったので、こちらの記事にそれっぽい説明がありましたのでそのへんを参考にします。

future-architect.github.io

qiita.com

Action Creater

Action Createrはディスパッチの際に引数として渡す「アクション」作成する関数です。 React.js & Next.js超入門

Actionにはtypeを指定することで、reducerでtypeで分岐させます。

サンプルとしてはこんな感じです。

//Action Creater
export function addMemo(text){
    return {
        type: "ADD",
        message: text
    }
}

Dispatch

Actionを生成するだけではStore内のStateを更新できないので、Actionをstoreへ送るDispatchが必要になります。

doAction(e){
        e.preventDefault();
        let action = addMemo(this.state.message);
        this.props.dispatch(action); // <- これ
        this.setState({
            message: ""
        });
    }

Reducer

Reducerはaction.typeの値を見て、それぞれの値に応じて関数を呼び出すものです。

こんな感じ。

//Reducer
export function memoReducer(state = initdata, action) {
    switch (action.type){
        case "ADD":
            return addReduce(state, action)
        case "DELETE":
            return deleteReduce(state, action)
        case "Find":
            return findReduce(state, action)
        default:
            return state;
    }
}

Connect

ReactのComponentはReduxのフローに介入することができません。 このフローに参加するために、ReactReduxによって提供されるconnectという関数を使用します。

書いてみると、なんとなくこんな感じ。

// connect
export default connect((state) => state)(AddForm);

こんな感じのことを頭において書いていけば、Reduxはなんとなく使えるようになりそうです。 その他、storeの永続化の話もありますが、必要になったら考えることにします。

適当になぐり書きした残骸

前回の続きです。

github.com

感想

フロントエンドにおいて、状態管理は非常に大事なトピックであり、Reduxも非常に重要なライブラリであるという風に感じます。 Reactも、この辺りまで来るとなんとなく自分でもアプリを作っていけそうな感触は出てきますね。

参考書籍も後半戦に入っているので、サクッと入門して自分でアプリを作っていきたいものです。。。