元エンジニアPMのプロダクトマネージャーお役立ち情報

スタートアップから大規模プロダクトまで担当している元エンジニアの筆者が、事業開発・プロダクトマネジメントに役立つ情報を発信します

Reduxで@@INITで初期Stateは設定しないほうが良い

tl:dr;

Reduxで初期Stateに値を入れる際は、@@INITを使わないほうが良い。 (後で調べたら、アンチパターンらしい)

下のように初期Stateを@@INIT時に渡すように設定していたら、 Production状態でINITがスルーされており正しく読み込まれていないことが判明。 (ちなみにREDUX devtoolsは@INITを読み込んでいるので発見に遅れた。) スクリーンショット 2019-04-21 14.56.46.png

改善前

const initialState = {
likeIDs : [],
hoge:{},
}

function setIdsToState = arr => {
let a = [];
if(Array.isArray(arr)){
arr.map( n=> { a.push(n.id) });
}
return a;
}

const activity = (state: Object = initialState, action: any) => {
switch(action.type){
case '@@INIT': {
const ids = setIdsToState(window._a);
return {
...state,
likeIDs = ids
}
}
}

結局initialState時に初期値を渡すようにして改修。

改善後

const _ids = { likeIDs = setIdsToState(window._a) };

const initialState = {
..._ids,
hoge:{},
}

function setIdsToState = arr => {
let a = [];
if(Array.isArray(arr)){
arr.map( n=> { a.push(n.id) });
}
return a;
}

Productionモードにしないと気づかなかったので、焦った。。

下記記事参考になりました。 https://github.com/reduxjs/redux/issues/186 https://qiita.com/kuy/items/869aeb7b403ea7a8fd8a