ブラウザをリフレッシュしたときに React/Redux の mytodo アプリのアイテムが永続化されない問題を再確認してみましょう。
永続化が問題でない場合や時間が限られている場合は、この手順をスキップして、手順 8「本番環境の準備」に直接進んでください。
.npm パッケージをインストールする
これを実現するために、「redux-localstorage」と呼ばれる別の Redux モジュールを使用します。これにより、ローカルストレージをすぐに実装できます。
次のコマンドを実行する
npm install --save redux-localstorage@rc
redux-localstorage を使用する
Redux ストアはストレージを使用するように構成する必要があります。src/app/store/configureStore.js の全体を次のコードに置き換えます
import {compose, createStore} from 'redux';
import rootReducer from '../reducers';
import persistState, {mergePersistedState} from 'redux-localstorage';
import adapter from 'redux-localstorage/lib/adapters/localStorage';
export default function configureStore(initialState) {
const reducer = compose(
mergePersistedState()
)(rootReducer, initialState);
const storage = adapter(window.localStorage);
const createPersistentStore = compose(
persistState(storage, 'state')
)(createStore);
const store = createPersistentStore(reducer);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () => {
const nextReducer = require('../reducers').default;
store.replaceReducer(nextReducer);
});
}
return store;
}
ブラウザでアプリを見ると、Todo リストに1つのアイテム「Use Yeoman」があることがわかります。アプリはローカルストレージが空の場合に Todo ストアを初期化し、まだ Todo 項目が提供されていません。
進んでリストにアイテムをいくつか追加してください
ここでブラウザをリフレッシュすると、アイテムが永続化されます。やったね!
Chrome DevTools の リソース パネルで Local Storage を選択して、データがローカルストレージに永続化されているかどうかを確認できます
ユニットテストを書く
追加の課題として、手順 6 でユニットテストを再確認し、コードがローカルストレージを使用するようになったことを踏まえて、テストをどのように更新できるかを検討してください。