Chỉnh sửa ngày 25 tháng 8 năm 2019
Như đã nêu trong một trong các bình luận. Gói lưu trữ redux ban đầu đã được chuyển sang ngăn xếp phản ứng . Cách tiếp cận này vẫn tập trung vào việc thực hiện giải pháp quản lý nhà nước của riêng bạn.
Câu trả lời gốc
Mặc dù câu trả lời được cung cấp là hợp lệ tại một số thời điểm, nhưng điều quan trọng cần lưu ý là gói lưu trữ redux ban đầu đã không được dùng nữa và nó không còn được duy trì nữa ...
Tác giả ban đầu của gói redux-storage đã quyết định không chấp nhận dự án và không còn được duy trì.
Bây giờ, nếu bạn không muốn có sự phụ thuộc vào các gói khác để tránh những vấn đề như thế này trong tương lai, rất dễ dàng để đưa ra giải pháp của riêng bạn.
Tất cả những gì bạn cần làm là:
1- Tạo một hàm trả về trạng thái từ localStorageđó và sau đó truyền trạng thái cho createStorehàm redux của 'trong tham số thứ hai để hydrate hóa cửa hàng
const store = createStore(appReducers, state);
2- Nghe các thay đổi trạng thái và mỗi khi trạng thái thay đổi, hãy lưu trạng thái vào localStorage
store.subscribe(() => {
saveState(store.getState());
});
Và đó là nó ... Tôi thực sự sử dụng một cái gì đó tương tự trong sản xuất, nhưng thay vì sử dụng các hàm, tôi đã viết một lớp rất đơn giản như bên dưới ...
class StateLoader {
loadState() {
try {
let serializedState = localStorage.getItem("http://contoso.com:state");
if (serializedState === null) {
return this.initializeState();
}
return JSON.parse(serializedState);
}
catch (err) {
return this.initializeState();
}
}
saveState(state) {
try {
let serializedState = JSON.stringify(state);
localStorage.setItem("http://contoso.com:state", serializedState);
}
catch (err) {
}
}
initializeState() {
return {
}
};
}
}
và sau đó khi khởi động ứng dụng của bạn ...
import StateLoader from "./state.loader"
const stateLoader = new StateLoader();
let store = createStore(appReducers, stateLoader.loadState());
store.subscribe(() => {
stateLoader.saveState(store.getState());
});
Hy vọng nó sẽ giúp ai đó
Lưu ý Hiệu suất
Nếu các thay đổi trạng thái diễn ra rất thường xuyên trong ứng dụng của bạn, thì việc lưu vào bộ nhớ cục bộ quá thường xuyên có thể ảnh hưởng đến hiệu suất ứng dụng của bạn, đặc biệt nếu biểu đồ đối tượng trạng thái để tuần tự hóa / deserialize lớn. Đối với những trường hợp này, bạn có thể muốn debounce hoặc điều tiết chức năng tiết kiệm nhà nước để localStorage sử dụng RxJs, lodashhoặc một cái gì đó tương tự.