ReactJS: Как сделать недоступным магазин за пределами реактора

Question

Как я могу сделать недоступным хранилище за пределами реакции? Можно ли как-нибудь сохранить значение в закрытой переменной на протяжении всего сеанса?

Answer 1

Действительно недоступно на самом деле невозможно в Javascript. Код можно минимизировать и запутать, но в конечном итоге он все доступен, хотя его трудно прочитать.

Здесь есть статья о том, как подключить хранилище редуксов в Твиттере к инструментам редукторов. https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1

Answer 2

Хранилище - это единственный источник правды, и любой набор там будет доступен в области действия родительского компонента, но вы можете ограничить доступ к данным хранилища через ловушки, как показано ниже:

Инициализация хранилища:

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>
  )
}

Здесь вы можете видеть, что хранилище необязательно для передачи в конкретный компонент, в приведенном выше примере компонент не может получить доступ к хранилищу.

Answer 3

хранилище доступно только с компонентом реагирования, который связан с хранилищем с помощью connect () ho c и если родительский компонент в приложении включен в провайдера. никакой другой реактивный компонент не может получить доступ к магазину.