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

按照教程將redux-persist配置完畢，的確在localstorage里有存儲(chǔ)redux數(shù)據(jù)，不過(guò)都是初始化的數(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
  )
}

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

localstorage里面的存儲(chǔ)
圖片描述

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

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

好了，破案了。名偵探柯南時(shí)間！↓

回答

編輯回答

玄鳥(niǎo)

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

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

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

然后我就想，既然他不自動(dòng)更新，那我手動(dòng)給他添加到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)鍵語(yǔ)句是對(duì)localstorage的操作，本來(lái)想的是，能不用locakstorage這種不安全不可靠用戶(hù)可修改的方式完成，現(xiàn)在到最后還是用了localstorage！

2017年9月21日 09:45

編輯回答