Redux'un başlangıç ​​durumunda localStorage'ı kullanabilir misiniz?

Question

Örneğin ... beklendiği gibi varsayılan localStorage gelen devlet döndüren ne yaptığımı bir küçültülmüş versiyonu var

export const user = (state = { 
    id: localStorage.getItem('id'), 
    name: localStorage.getItem('name'), 
    loggedInAt: null 
}, action) => { 
    case types.LOGIN: 
     localStorage.setItem('name', action.payload.user.name); 
     localStorage.setItem('id', action.payload.user.id); 
     return { ...state, ...action.payload.user } 

    default: 
     return { ...state, loggedInAt: Date.now() } 
} 

. Ancak, sayfamı yeniledikten sonra uygulamamın durumu aslında boş. Hiçbir yan etkisi, yani düşürücüler yana

const initialState = { 
    id: localStorage.getItem('id'), 
    name: localStorage.getItem('name'), 
    loggedInAt: null 
}; 

const store = createStore(mainReducer, initialState); 

saf fonksiyonları olmalıdır ve localStorage.setItem:

createStore(reducer, [initialState], [enhancer]) 

Yani böyle bir şey yapabilirsiniz:

Answer 1

Redux createStore 2 param mağaza başlatma için tasarlanmıştır test kesinlikle zarar verecek bir yan etkidir, redüktörde localStorage'a kaydetmekten kaçınmalısınız. Bunun yerine şunları yapabilirsiniz:

store.subscribe(() => { 
    const { id, name } = store.getState(); 

    localStorage.setItem('name', name); 
    localStorage.setItem('id', id); 
}); 

Bu zaman durum değişikliklerini olur, bu nedenle performansı etkileyebilir. ? Eğer `size gerektiği anlamına ne`

window.onbeforeunload =() => { 
    const { id, name } = store.getState(); 

    localStorage.setItem('name', name); 
    localStorage.setItem('id', id); 
};