Localstorage with react-redux

Question

저는 SPA에 react와 redux를 사용하고 있으며 일부 데이터를 로컬로 저장하려고합니다. 그리고 appState와 localstorage를 동기화해야하므로 페이지를 새로 고친 후에도 데이터가 손실되지 않습니다. 도와주세요, 제발. 나는 반응과 redux에 대한 완전히 새로운 무엇이 일어나고 있는지 이해 많이하지 않지만, 내가 생각하기에 redux는 전체 애플 리케이션의 상태를 생성하므로 응용 프로그램 구성 요소 사촌 내 localstorage와 내 상태를 바인딩 할 수 없습니다 ' 구성 요소의 상태 일 뿐이며 내 앱이 아닙니다. (앱의 수명주기를 이해하는 데 도움이되는 좋은 자습서도 있습니다.)

Answer 1

다음 명령으로 데이터를 로컬 저장소에 저장하는 것이 좋습니다. 로컬 스토리지의 데이터가 명령을 수행 할 수 있습니다

설정 : 필요한 경우

localStorage.setItem('nameForData', variableNameForData);

데이터를 검색 할 수 있습니다.

var variableNameForData = localStorage.getItem('nameForData')

는 로컬 스토리지에서 데이터를 제거하려면 :

localStorage.removeItem('nameForData')

이 일반적으로 로컬 스토리지와 애플리케이션의 상호 작용을 추적 일부 부울의 상태를 변경하는 디스패치와 액션 제작자 안에 넣어 것 .

예를 들어 로컬 저장소를 만들 때 상태가 true로 설정되어있을 수 있습니다.

새로 고침 할 때 로컬 저장소가 있는지 확인하는 작업 작성자를 호출 할 수 있으며 해당 부울을 다시 true로 설정하거나 존재하지 않는 경우 다시 로컬 저장소를 만든 다음 true로 설정할 수 있습니다.

이 함수는 componentWillMount(){}에 넣을 수 있으며 구성 요소가 처음 렌더링 될 때 호출되므로 새로 고침시 호출됩니다.

Docs for component life cycle and specifically componentWillMount here

Docs for local storage here

Answer 2

난 당신이 각 작업 후 상태를 저장하기 위해 제안 할 수 있습니다. 이를 위해 전체 상태 개체 만 저장하는 localStorage 미들웨어을 사용할 수 있습니다.

그런 다음 createStore 파트에서 localstorage API로부터 initialState을 검색합니다. 당신이 어떤 구성 요소를 수정할 필요가 없습니다이 경우

는, 로컬 스토리지에서 초기 상태 (Initial)과 국가에게 답변을