ググってもろくな情報が出ずイライラしている諸氏に送るシリーズ。
redux-thunk の使用を推奨しているわけでは無いのであしからず。
無邪気キッズがインタネッツの情報に踊らされた結果導入->破綻しその尻拭いをする事になったおっちゃん達向け。
こちとらイライラをモチベとして書いているので、React ファンボーイは気分を害する恐れアリ。そっ閉じ願う。
で、こいつは何か?
Redux で async やるためのもの。そう、それだけ。バカ丸出し。
上記エントリーで書いたコードの async 部分を thunk に変えたものを示す。
import axios from 'axios' import React from 'react' import { createStore, applyMiddleware } from 'redux' import { Provider, connect } from 'react-redux' import thunk from 'redux-thunk' const gStatus = { time: '---', } const Main = connect()(props => { return (<div> <Input /> <Display /> </div>) }) const Display = connect(status => status)(props => { return (<div> <p>Time: {props.time}</p> </div>) }) const Input = connect( state => state, dispatch => { return { // store の dispatch を直接ひっぱたく方法 getTime: arg => { axios.get('https://ntp-a1.nict.go.jp/cgi-bin/time').then(res => { store.dispatch({ type: 'getTime', payload: arg + res.data }) }) }, // thunk 使うと store.dispatch に関数が渡せるようになり dispatch を引数で渡しつつ叩いてくる // なので、こいつで dispatch を引数で受ける関数を返してやるようにすれば良いと言う話 getTimeThunk: arg => { return _dispatch => { axios.get('https://ntp-a1.nict.go.jp/cgi-bin/time').then(res => { _dispatch({ type: 'getTime', payload: arg + res.data }) }) } }, // まともな方法 getTimeAsync: async (arg) => { const res = await axios.get('https://ntp-a1.nict.go.jp/cgi-bin/time') dispatch({ type: 'getTime', payload: arg + res.data }) } } } )(props => { let input = '' return (<div> <button onClick={() => props.getTime('NOW=')}>getTime</button> <button onClick={() => store.dispatch(props.getTimeThunk('NOW='))}>getTime(Thunk)</button> <button onClick={() => props.getTimeAsync('NOW=')}>getTime(Async)</button> </div>) }) const store = createStore((state, action) => { switch (action.type) { case 'getTime': return { ...state, time: action.payload } default: return state } }, gStatus, applyMiddleware(thunk)) // tunk 使うために applyMiddleware(tunk) を渡してやる export default (props) => { return <Provider store={store}><Main /></Provider> }
コメントで書いているが、一応説明。
getTime は store.dispatch を直接叩く方法。これを redux-thunk を使うと、getTimeThunk のように書ける。そう書けるからと言って何が嬉しいか?特に何も嬉しくは無い。
まともな方法として書いている getTimeAsync で書くのが一番。昔は Redux で async を store.dispatch を直接叩く方法でしか扱えなかったから必要なものっぽい雰囲気。
完全なバッドノウハウ。RIP