記事について
この記事は、駆け出しエンジニアの僕がVue→Reactの翻訳学習の際に、より理解を深めるために綴っている記事です。
Vueについてはあまり学習しておらず、Reactに重点を置いて学習をしています。
拙い部分があるかもしれませんが、ご指摘・ご意見がある際は是非お願いします。
概念
ReactReduxとVuexでの基本的な概念
ReactRedux: State / ActionCreator / Action / Reducer / Store
Vuex: State / Getters / Mutations / Actions / Store
それぞれの互換性について理解を深めて、React ⇆ Vueの翻訳に役立てる
Reduxの概念について
- State: データを保持する領域
ActionCreator: Actionオブジェクトを生成する関数
Action(object): Actionの情報をもとにステート更新を行う。Storeの「dispatchメソッド」でStoreにActionオブジェクトを渡す
※thunkなどで非同期を実装する際にはobjではなく関数をStoreに渡すReducer: Actionと現在のステート情報をもとに新しいステートを生成して、Storeに保持する
Store: ステートをもつ。store周りのメソッドをもつ。
Vueの概念について
- State: データを保持する領域
Getters: ステートに加工したデータを返す機能（同期処理only）
Mutations: ステートの変更を行う機能
Actions: 内部でMutationを行いStateを更新する機能（同期処理&非同期処理）
Store: 1~4を保持するオブジェクト
互換性
reduxで非同期を実装する場合は、適応したライブラリのインストールが必要
| ReactRedux(x) / Vuex（y） | State | ActionCreator | Action | Reducer | Store |
|---|---|---|---|---|---|
| State | ほぼ同義 | x | x | x | x |
| Getters | x | x | x | x | x |
| Mutations | x | x | x | 同様にstateの値を更新する | x |
| Actions | x | 非同期のロジックはActionCreatorに記述される | Actionは非同期の関数にもなる | x | x |
| Store | x | x | x | x | stateを保持するが、異なる部分もある |
まとめ
互換性について記事を書きましたが、VueとReactは似ている部分もありますが別のフレームワークなので、例としてReactにはGettersがなかったりします。
翻訳作業時に足りない機能などは、同等のものを自作などする必要があります。