このページとこのページを参考にしてReduxを勉強をしています。
このページの著者のgithubはここにあります。
このサイトの中にこんなコードが有りました。
javascript
1// src/actions/app.jsx 2 3//import AppActions from '../actions/app'で呼び出し 4export default { 5 increment: () => { 6 return { type: 'INCREMENT' } 7 } 8} 9 10//import {increment} from '../actions/app' で呼び出し 11export function increment(){ 12 return { 13 type: 'INCREMENT' 14 } 15} 16
コレに関して3つほど質問があります。
一つ目はこのコードはES6の記法に従っているのでしょうか。それともES5のものなのでしょうか。
同じページにある
javascript
1function mapDispatchToProps(dispatch) { 2 return { 3 handleClick: () => { dispatch(increment()) } 4 } 5}
がES5だと思ったので、わからないながらも以下のように書き換えてみました。
javascript
1const mapDispatchToProps = (dispatch) => { 2 return{ 3 handleClick(){ 4 dispatch(AppActions.increment()) 5 } 6 } 7}
基本的にHoge: ()=>
のような記述はES5だと思っていますが、この認識はあやまってますでしょうか。上のコードがES6なのかどうか、もし違うならES6での書き方を、もしES6ならこの記法の名称(またはこの記法について調べる時のキーワード)があればそれを教えてほしいです。
二つ目にこのコードの後半はactionを定義しているのだと思いますが、前半のexport default{}
の部分は何をしているのでしょうか。いろいろなところでReduxについて調べているのですが、Action周りについては書き方のレパートリーが沢山あるように見えるのと、ES5とES6で書いているものあるので理解が芳しくありません。
レパートリーの具体例としては
(アロー関数、returnなし)
javascript
1export const onNumClick = (number) => ({ 2 type: actionTypes.INPUT_NUMBER, 3 number, 4});
javascript
1const Actions = { 2 addTodo(value) { 3 return { 4 type: 'ADDTASK', 5 value, 6 } 7 }, 8 fixTodo(value) { 9 return { 10 type: 'FIXTASK', 11 value, 12 } 13 }, 14 updTodo(value) { 15 return { 16 type: 'UPDTASK', 17 value, 18 } 19 }, 20 delTodo(value) { 21 return { 22 type: 'DELTASK', 23 value, 24 } 25 }, 26}
3つ目は最初のコードのincrement()
をcontainerファイル内で
import AppActions from '../actions/app'
でimportして、AppActions.increment()
で利用している点です。
最初に載せているコードがsrc/actions/app.jsxの全文なのですが、このなかにAppAction
という単語は一つもないのになぜimportできているのでしょうか。
Reduxについて全然体系的に学習できていないのは、ES6,React,Reduxそれぞれの知識が曖昧なのは重々承知しています。
行き詰まってしまったので、どなたかお力添えして頂けると助かります。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。