React：如何使商店不受重新加载的影响？

Question

我使用 useReducer 创建了商店，并由 Context 提供商提供状态和 dispatch 功能：

/*code...*/
import { InsuranceItemContext } from './Context/InsuranceItemContext';
import { reducer } from './Reducer/Reducer';

function App() {
  const [state, dispatch] = React.useReducer(reducer, undefined);
  return (
    <BrowserRouter>
      <InsuranceItemContext.Provider value={{state, dispatch}}>
        <div className='App'>
          <Header />
          <Section />
          <Footer />
        </div>
      </InsuranceItemContext.Provider>
    </BrowserRouter>
  );
}

export default App;

在下一个文件中，我通过dispatch函数接收数据并将其传输到商店：

/*some code...*/
<input onClick={() => dispatch({
        type: 'ADD_ITEM',
        payload: {
            coverage: coverageValue,
            risk: props.risk,
            price,
            title: props.title
        }
    })} type='submit' name='submit' className='submit' />
/*some code...*/

我的应用程序的每个组件都可以正常工作，但我有一个问题：每次我重新加载页面或呈现另一个组件时，我商店的数据都会消失。
我该如何解决？

Answer 1

为此，我应该使用 localStorage。因为它将数据保存在用户设备（浏览器）上。
所以，如果我想将一些数据记录到 localStorage，我必须使用这些指令：

 localStorage.setItem() //for recording
 localStorage.getItem() //for reading

我的主要错误是没有使用 JSON.stringify() 函数记录数据，因为 localStorage 将我的数据转换为 string （在我的例子中它是一个对象，结果是 [object Object]).

总而言之，我明白了，并将我的代码更改为变体：

 localStorage.setItem('variable', JSON.stringify(variable)) //for recording
 JSON.parse(localStorage.getItem('variable')) //for reading

JSON.parse()我用来解密json符号，接收原始视图中的数据。
所以，这里是我的更改：

/*some code*/ 
function App() {
  const [state, dispatch] = useReducer(reducer, null);
  useEffect(() => {
    if (state) localStorage.setItem('state', JSON.stringify(state));
  }, [state]);
  useEffect(() => {
    dispatch({type:'GET_DATA', payload: 
        JSON.parse(localStorage.getItem('state'))});
  }, []);
  console.log('Local storage: ' + JSON.stringify(window.localStorage.state));
  console.log('My storage: ' + JSON.stringify(state));
}
/*some code*/

Answer 2

发生这种情况是因为 Redux 是一个在会话中保持状态的全局状态管理器。如果您重新加载页面，新会话将启动并且存储在 redux 中的所有内容都会消失。

如果你想要一个持久的全局状态管理器，你应该使用 redux-persist，它是 redux 和 localStorage 的组合（作为网络的默认设置，但你应该 select 不同的存储）。

React：如何使商店不受重新加载的影响？

React: How to make store invulnerable for reload?

reactjs

react-hooks

store

use-context

use-reducer