React + Reduxでメモアプリを作成(情報保持⑧)

2020年6月7日2021年1月24日

機能的にはメモは完成しましたが、このメモにはまだ致命的な弱点があります。
ブラウザを更新したら追加したメモを「忘れる」ということです。
余裕のある方は+αで「メモを忘れない」機能を追加しましょう。
下記の記事からの続きになります。
https://kazunaka.com/react-redux-memoapp-seven/

「redux-persist」というのを使用します。
簡単に説明すると、redux-persistを使うと
Reduxの状態(state)を保持することができます。

ファイルを編集

src/configStore.js

次にsrc直下にsrc/configStore.jsファイルを新規作成します。

import { createStore } from 'redux';
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import rootReducer from './reducers';

const persistConfig = {
	key: 'root',
	storage,
	whitelist: ['memos']
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(
	persistedReducer,
);

export const persistor = persistStore(store);
export default store;

次にsrc/index.jsで、先ほど作成したconfigStore.jsを使えるようにします。
下記からはsrc/index.jsでの編集となります。

src/index.js

まずは使う機能をimportします。

import { PersistGate } from 'redux-persist/integration/react';
import store, { persistor } from './configStore';

次は不必要なコードを削除orコメントアウトします。
本記事ではコメントアウトします。

// const store = createStore(reducer);

次にReactDOM.render();の中を編集します。
// 追記の行を追加&<BrowserRouter>のインデントを変えます。

<Provider store = { store }>
    <PersistGate loading={null} persistor={persistor}> // 追記
      <BrowserRouter>
        <Switch>
          <Route path = "/new" component = { MemoNew } />
          <Route path = "/show/:id" component = { MemoShow } />
          <Route exact path = "/" component= { MemoIndex } />
        </Switch>
      </BrowserRouter>
    </PersistGate> // 追記
  </Provider>,

アプリを実行

コマンドでアプリを実行しましょう。

$ yarn start

メモをいくつか追加してみて更新ボタンを押してみましょう。
作成したメモを消えなければ成功です。

確認用でsrc/index.jsの全体コードを載せておきます。

全体コード

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
// import { createStore } from 'redux';
import { Switch, BrowserRouter, Route } from 'react-router-dom';

import { PersistGate } from 'redux-persist/integration/react';
import store, { persistor } from './configStore';

import reducer from './reducers';
import * as serviceWorker from './serviceWorker';

import MemoIndex from './components/memoIndex';
import MemoNew from './components/memoNew';
import MemoShow from './components/memoShow';

// const store = createStore(reducer);

ReactDOM.render(
	<Provider store={store}>
		<PersistGate loading={null} persistor={persistor}>
			<BrowserRouter>
				<Switch>
					<Route path="/new" component={MemoNew} />
					<Route path="/show/:id" component={MemoShow} />
					<Route exact path="/" component={MemoIndex}/>
				</Switch>
			</BrowserRouter>
		</PersistGate>
	</Provider>,
	document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

これでメモアプリは以上になります。
今までに編集をしたファイルの全体の全てのコードも載せておきます。
https://kazunaka.com/react-redux-memoapp/

最後までお付き合いいただきありがとうございました。