在正式部署应用时,应该避免将 REDUX store 暴露给用户。如果用户可以查看 REDUX store,他们可能会在浏览器的控制台上查看应用程序的状态信息和敏感数据。
为了避免这种情况,可以通过将 REDUX store 限制在应用程序的 scope 内来保护用户的隐私。这可以通过使用 Provider 和 connect 来实现。
Provider 是一个包裹整个应用程序的高层组件,它接受一个存储作为 prop,并将其作为 context 的一部分传递给下面的子组件。这将保护 REDUX store,并确保只有 connect 组件可以访问它。
以下是一个示例:
// App.js import React from 'react'; import { Provider } from 'react-redux'; import store from './store'; import MyComponent from './MyComponent';
function App() {
return (
export default App;
// MyComponent.js import React from 'react'; import { connect } from 'react-redux';
function MyComponent({ someData }) { return (
function mapStateToProps(state) { return { someData: state.someData }; }
export default connect(mapStateToProps)(MyComponent);
在此示例中,Redux store 通过 Provider 组件传递给 MyComponent,connect() 函数使 MyComponent 可以访问存储中的某些数据。由于 store 只在 Provider 内部绑定,所以不能在 MyComponent 之外访问它。这样可以保护用户的隐私,使敏感数据不会泄露给用户。
下一篇:部署后运行一个节点脚本?