147日目-28品目目

プロジェクト

前のプロジェクトに続いて、本プロジェクトではlocalStorageも使用しています.
しかし、以前のプロジェクトでは、redoxを使用していなかったため、思ったより簡単な作業だったのですが、今回のプロジェクトでは、redoxを使用して自称するのは難しいです.
これらの例はReduxではなくRedux-toolkitで作成されているため、コードを読み取るのは難しい.
そしてredux-persistの使い方はブログを書き、redux-persistの存在を知り、このライブラリを学び、最終的にstateをlocalStorageに保存することに成功した.
サンプルコードは、次のセクションで記述されます.

Dev Log

今日はどのようにプロジェクトに貢献しましたか。

LocalStorageを使用して州

を保存

axiosタスク

今日の種目は何か難点がありますか。

LocalStorageに保存された前のアイテムはReduxを使用せず、ステータスのみをReduxとして保存します.
このプロジェクトはredixでLocalStorageを使用する方法を説明するのは難しい.

明日は何をしてプロジェクトに貢献すればいいですか?

Order page axiosタスク

追加

Redux-React Appを初めて使用した場合を例にとります.

npx create-react-app my-app --template redux 

上のコマンドでmy-appというappを作成します.
まずcd my-appコマンドでmy-appに入り、npm i redux-persistコマンドでredux-persistをインストールします.
修正するファイルはsrc/app/storeです.jsとsrc/index.jsの2種類のファイル.
次のように変更します.

// src/app/store.js

import { configureStore } from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage';
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import thunk from 'redux-thunk';
import counterReducer from '../features/counter/counterSlice';

const reducers = combineReducers({
  counter: counterReducer,
});

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, reducers);

const store = configureStore({
  reducer: persistedReducer,
  middleware: [thunk]
});

export default store;

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './app/store';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';
import * as serviceWorker from './serviceWorker';

let persistor = persistStore(store);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

結果

リフレッシュしても、数値は保存されます.