ikuo00ukの日記

元エンジニアのプロダクトマネージャー。 読んだ本とか紹介しています。

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