2016-08-08 8 views
0

私は初期状態のレデューサーを持っており、正常に動作しています。は、ローカルストレージのデータを使用して減速機の初期状態を更新するのがよいでしょうか?

const initialState = [items:{ 
    id: 1, 
    text: 'Monday', 
}, 
{ id: 1, 
    text: 'Tuesday', 
}]; 

function dayChaged(state = initialState, change) { 

.. 
} 

アプリが正常に動作しています。しかし、私はローカルストレージのサポートを追加しました。私は、ユーザーが1つ追加するたびに、新しいアイテムをストレージに保存したいと思います。ページがリフレッシュ/リロードされているとき、iniTialStateにlocalStorageの値を加えた値になるようにiniTialStateを設定します。しかし、私は州/レデューサークラスでこれを追加しましたが、これはベストプラクティスではないように感じます。

const storageItems = JSON.parse(localStorage.getItem('items')); 
if(storageItems) { 
    initialState = { todos: initialState.items.concat(storageItems) }; 
} 
function dayChaged(state = initialState, change) { 

    .. 
    } 

これはうまく動作し、私がしたいことをしています。しかし、これは私の理解に還元剤を複雑にします。どうすれば私の意図を考慮して、このような機能を追加する必要があります、どうすれば完全に状態のテスト容易性に影響を与えずにこれを統合するのですか?

+0

ルールは 'truth'の単一のソースです。 APIを使用してデータを更新する場合は、その状態にローカル記憶域を使用する必要はありません。アプリケーションがブラウザにのみ存在し、他の外部APIに依存していない場合、ローカルストレージは、ページリロード後もデータを保持し続けるための良いオプションです。 – anoop

+0

@anoopローカルストレージを組み合わせて使用​​する場合、少なくとも1つの有効な使用例があります。サーバーサイドストレージ - アプリの初期化、楽観的なアップデート、オフラインアプリの高速化 OP - 実際に減速機のinitialStateを変更する必要があるか、実際に店舗全体の状態を設定する必要があるかどうかを検討します(個々の減速機の初期状態は無視されます)。 – WTK

答えて

0

最初に、減速機のinitialStateを変更する必要があるか、実際には店舗全体の初期状態を設定する必要があるかどうかを検討してください(個々の減速機の初期状態は無視されます)。

createStore関数のシグネチャを参照して、初期ストア状態を2番目の引数として受け入れ、そこからlocalStorageに状態を渡します。

https://github.com/reactjs/redux/blob/master/docs/api/createStore.md

関連する問題