Redux, React для одностраничного входа в систему и выхода из системы - PullRequest
Новая
       5

Redux, React для одностраничного входа в систему и выхода из системы

0 голосов
/ 24 декабря 2018

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

function reducer(state, action) {
  if(action.type === 'timeOut'){
    this.setState({ 
      loggedIn : false,
      logoutMessage : 'Your session has timed out',
      errorOpen : true, 
    });
  }else if(action.type === 'error'){
    this.setState({ 
      loggedIn : false,
      logoutMessage : 'An error has occured',
      errorOpen : true,
    });
  }else if(action.type === 'logout'){
    this.setState({ loggedIn : false });
  }
}

const store = createStore(reducer);

export default class LoginRegister extends Component {
  constructor(props){
    super(props);
    this.state = {
      onLoginPage: true,
      loggedIn: false,
      loginError: false,
      logoutMessage: '',
      errorOpen: false,
    }
  }

Ниже приведен мой пример кода.То, что я собирался сделать, это создать действия, а затем передать хранилище дочерним компонентам, которые выполняют вызовы REST, и если ответ на любой из вызовов REST был 401 с сообщением об истечении времени, он отправил бы действие, сообщающее этой главной страницеустановите для входа в систему значение false.Любые предложения и советы по практике Redux будут великолепны!

1 Ответ

0 голосов
/ 24 декабря 2018

Я думаю, вам стоит взглянуть на еще документацию , редуктор похож на ... кусок вашего магазина, содержащий данные и изменяющий эти данные в зависимости от ваших действий.скажем, у вас есть только один редуктор, ваши данные о состоянии будут жить только внутри него (state.reducer).В противном случае он будет распространен на все созданные вами редукторы (при использовании ОбъединитьReducers )Этот слегка измененный пример взят из документации по редукционным редукторам: 

const initialState = {
    todo: null,
    showTodo: false,
}
function todoAppReducer(state = initialState, action) { // state is equal to initialState if null
  switch (action.type) {                // switch is like if/else if, up to you which to use
    case SET_MY_TODO:
      return Object.assign({}, state, { // Here they use object assign,
        todo: action.todo,              // but you can use the new spread operators if you want.
      })                                // the next case is an example of this.
    case SHOW_MY_TODO:
      return {
          ...state,                     // this will make a new object, containing all of what
          showTodo: true,               // state contained with the exeption of setting showTodo
      }                                 // to true
    case HIDE_MY_TODO:
      return {
          todo: state.todo,
          showTodo: false,              // this is what both of those methods do in an explicit way
      }
    case CLEAR_MY_TODO:
      return Object.assign({}, state, { 
        todo: null,
      })
    default:
      return state
  }
}

их примеры используют переключатель / регистр, это больше, чем я знаю, но когда дело доходит до того, как изменить состояние, они нена самом деле не вызывайте setState (), им нужно только вернуть объект состояния NEW для этого конкретного редуктора (в вашем случае это называется редуктор) на основе того, что такое action.type и action.xxx (потенциальные параметры).В вашем коде вам нужно только вернуть новое состояние! 

                     // Here I recommend you use constants for your action types,
                     // ex: export const TIMEOUT = 'TIMEOUT'; in an actionsTypes.js file for example
                     // That way if you modify ^^^ it will propagate to all files everywhere,
function reducer(state, action) {
  if(action.type === 'timeOut'){                   // using what I showed in the 
      loggedIn : false,                            // example, you need 
      logoutMessage : 'Your session has timed out',// to return objects for each
      errorOpen : true,                            // if/else if that define the
    });                                            // NEW state for this reducer!
  }else if(action.type === 'error'){
    this.setState({ 
      loggedIn : false,
      logoutMessage : 'An error has occured',
      errorOpen : true,
    });
  }else if(action.type === 'logout'){
    this.setState({ loggedIn : false });
  }
}

Затем, используя response-redux , вы подключаете свой компонент React к своему магазину (то, что содержит ваше состояние),И это дает вам доступ ко всему дереву состояний (используя mapStateToProps ) и доступ к вашим действиям (чтобы их можно было вызывать по реакции) с помощью mapDispatchToProps !

Это мой первый ответ, надеюсь, это не слишком грязно!Извините!

...