React：如何使商店对重新加载无懈可击？

Posted 2023-03-16

【中文标题】React：如何使商店对重新加载无懈可击？

【英文标题】：React: How to make store invulnerable for reload?

【发布时间】：2021-10-02 16:20:12

【问题描述】：

我用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...*/

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

【问题讨论】：

你可以看看——redux-persist。

【参考方案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*/

【参考方案2】：

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

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