あの日のようにホクソエムになる

このエントリは HOXO-M Advent Calendar 2017 4日目の記事です。 何なんだホクソエムアドベントカレンダーって。

HOXO-Mの方々にはいつも勉強会やブログ、書籍、Rパッケージなど様々な場面でお世話になる機会が多く、大変感謝しております。 それと同時に、その圧倒的パワーに昔憧れを抱いているのも事実です。

その憧れる気持ちが行き過ぎたのか、その昔、私は 匿名技術集団ホクソエム組に入門するための杯(カプチーノ)を交わしていないのにも関わらず、 自らをホクソエムと名乗ってしまったのです。

それは私が今の職場に就職して間もないときのこと。 私は職場の方々と仕事終わりに 塚田農場 に行き、楽しいひとときを過ごしていました。 夜も更け、宴もたけなわという頃、店員さんに塚田農場名刺なるものの存在があると聞きました。

店員さん「只今塚田農場でお客様のお名刺をお作りしているんです〜!お名前よろしいですか?」

私「あ、はい、ホクソエムです」

店員さん「ほ、ほく.....はい?」

そうして出来たのがコレです↓

f:id:ksmzn:20171204211329j:plain

厄介な客だと思われたでしょうが、なんとほくそ笑んでるイラストも描いてくれました。 その日以来、なんだか恥ずかしくてその塚田農場に行っていないのですが、 今はどうやら名刺サービスは終了してしまっているようです。

しかし、あのときの僕のように、ホクソエムに憧れる R使い はたくさんいると思うのです。 そんな方々のために作りました。

ホクソエム名刺アプリ「HOXO-M Card」です。どうぞ↓

HOXO-M Cardhttps://ksmzn.shinyapps.io/hoxom-card/

Shinyとmagickパッケージを使うことで、誰でも簡単にホクソエムに入った気になれる画期的なサービスです。

ムダにTwitter連携機能とかmagickパッケージによるエフェクトとかもあるので、遊んでみてください。 Twitterログイン後にShereボタンを押すと、名刺画像がいきなり投稿されますので、ご注意を。 あんまりいろんなブラウザで動作確認してないので、動かなかったらごめんなさい。 コードはこちらです -> ksmzn/HOXOM_card PRお待ちしてます。

実はRで名刺を作るネタはおもいっきり被っているのですが、こちらはおふざけ編ということで。 真面目な名刺がほしい人は u_riboさんのエントリ がめちゃめちゃ為になります。

エンジョイ

Redux & flow-typed で mapStateToProps に型を付ける

メモ。

Reduxで開発中、 flow-typedを導入し、チェックしたところ下記のエラーが。

export default connect(mapStateToProps)(Metadata);
                    ^^^^^^^^^^^^^^^^^^^^^^^^ function call. Could not decide which case to select

MapStateToProps のtypeが用意されているのでそれを使う。

import type { MapStateToProps } from "react-redux"

const mapStateToProps: MapStateToProps<*, *, *> = (state: StateType) => {
  return ...
}

export default connect(mapStateToProps)(...)

参考: react-redux type error when only passing in only mapStateToProps on flow v0.55.0 #1269

Redux で State をリセットする

ログアウトしたときなどに、ReduxのStateをまっさらにリセットしたいことがある。 そういう場合は下記のように、rootReducer内でログアウトactionを拾ってからReducerを更新する。

なお、一部のstateだけはリセットしたくない場合は、そのstateだけ残せばよい。 例えば下記では、react-routerを用いているため router だけは残している。

import { createStore, combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

import reducers from '../reducers';

const appReducer = combineReducers({
  ...reducers,
  router: routerReducer
});

const rootReducer = (state, action) => {
  if (action.type === 'LOGOUT') {
    const { router } = state;
    state = { router };
  }
  return appReducer(state, action);
};

参考: How to reset the state of a Redux store?