ReactJS：如何在反应之外使 redux 存储无法访问

Question

如何使 redux 存储在 react 之外无法访问？ 有什么方法可以在整个会话期间将值存储在私有变量中吗？

Answer 1

store 仅适用于使用 connect() hoc 与 store 连接的 react 组件，并且如果应用程序中的超级父组件包装到 provider 中。 没有其他反应组件可以访问商店。

Answer 2

真正无法访问在 Javascript 中是不可能的。 代码可以被缩小和混淆，但最终它都是可用的，无论多么难以阅读。

这里有一篇关于将 Twitter 的 redux 商店连接到 redux 开发工具的文章。 https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1

Answer 3

Store 是单一的事实来源，无论父组件范围内的任何设置都可用，但您可以限制通过钩子访问存储数据，如下所示：

初始化存储：

const initialState = {
  user: null,
  permissions: [],
  isAuthenticating: false,
  authError: null,
}

减速机功能：

function reducer(state, action) {
  switch(action.type) {
    case 'AUTH_BEGIN':
      return {
        ...state,
        isAuthenticating: true,
      }

    case 'AUTH_SUCCESS':
      return {
        isAuthenticating: false,
        user: action.user,
        permissions: action.permissions
        authError: null,
      }

    case 'AUTH_FAILURE':
      return {
        isAuthenticating: false,
        user: null,
        permissions: []
        authError: action.error,
      }

    default:
      return state
  }
}

应用组件：

function App() {
  const [store, dispatch] = useReducer(initialState)

  return (
    <React.Fragment>
      <Navbar user={store.user} />
      <LoginPage store={store} dispatch={dispatch} />
      <Dashboard />
      <SettingsPage permissions={store.permissions} />
    </React.Fragment>
  )
}

在这里您可以看到 store 是可选的，可以在上面的示例组件中传递特定组件无法访问 store。