使用redux-persist 本地化redux存儲數(shù)據(jù)，在localstorage里的確有存儲redux，但是值是初始化的值？

按照教程將redux-persist配置完畢，的確在localstorage里有存儲redux數(shù)據(jù)，不過都是初始化的數(shù)據(jù)，下面貼代碼。

store.js

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native
 
import combineReducers from './reducers.js'
 
const persistConfig = {
  key: 'root',
  storage,
}
 
const persistedReducer = persistReducer(persistConfig, combineReducers)
 
export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

最外層的react組件。

import React from 'react'
import ReactDOM from 'react-dom'
import './styles/main.scss'
import {Provider} from 'react-redux';
import storeConfig from './redux/store'
const { persistor, store } = storeConfig()

import { PersistGate } from 'redux-persist/integration/react'

// Store Initialization
// ------------------------------------

// Render Setup
// ------------------------------------
const MOUNT_NODE = document.getElementById('root')

let render = () => {
  const App = require('./routes/App').default
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
    ,
    MOUNT_NODE
  )
}

存儲進(jìn)去log出來的數(shù)據(jù)
圖片描述

localstorage里面的存儲
圖片描述

還是沒有人回答，看了一下dedux dev tool，發(fā)現(xiàn)問題所在如圖
圖片描述
只有在初始化的時候從localstorage里面拉和推一次數(shù)據(jù)。
當(dāng)我主動寫數(shù)據(jù)到store的時候，并沒有將新的數(shù)據(jù)寫入localstorage，導(dǎo)致刷新以后，從localstorage拉取的數(shù)據(jù)是localstorage里的未更新的數(shù)據(jù)

我嘗試將localstorage里的數(shù)據(jù)更改，然后刷新，發(fā)現(xiàn)我更改的數(shù)據(jù)又在store里面（也就是說并不是一直都是初始化的數(shù)據(jù)。）

好了，破案了。名偵探柯南時間！↓

回答

編輯回答

玄鳥

redux-persist 這東西，看了一下npmjs上的文檔，有個State Reconciler的東西，這東西看有三個方法：hardSet，autoMergeLevel1，autoMergeLevel2。

const persistConfig = {
  key: 'root',
  storage,
  stateReconciler: autoMergeLevel1,
}

放到配置里面，就能自動更新？可是...一點(diǎn)卵用都沒有！一點(diǎn)卵用都沒有！一點(diǎn)卵用都沒有！一點(diǎn)卵用都沒有！

然后我就想，既然他不自動更新，那我手動給他添加到localstorage里不就好了嗎，成功了，代碼如下
在你的reducers的下面

export default function reducer(state = initState, action) {
    switch (action.type) {

        case SAVEUSER:
            state.user_data = action.UserData;

            var locStore = JSON.parse(localStorage.getItem('persist:root'));
            locStore.webState = JSON.stringify(state);

            localStorage.setItem('persist:root',JSON.stringify(locStore));
            
            return state;
        case SAVEACTID:
            state.ActID = action.ActID;

            console.log(state,'actidddddddddddddddd');
            
            var locStore = JSON.parse(localStorage.getItem('persist:root'));
            locStore.webState = JSON.stringify(state);
            localStorage.setItem('persist:root',JSON.stringify(locStore));

            return state;
        default:
            return state
    }
}

關(guān)鍵語句是對localstorage的操作，本來想的是，能不用locakstorage這種不安全不可靠用戶可修改的方式完成，現(xiàn)在到最后還是用了localstorage！

2017年9月21日 09:45

編輯回答