Question

我正在尝试将redux用于单页应用程序。其背后的原因是，如果由于令牌验证超时或错误而导致注销，我可以从子组件调用存储并设置要分别调用的动作，但是我不确定如何执行此操作，并且我不是100 ％确定这可能是Redux的用法

SourceManager

下面是我的示例代码。我要做的是创建操作，然后将存储传递给进行REST调用的子组件，如果任何REST调用的响应为401，且带有超时消息，它将调度一个操作，告知该主页至将登录设置为false。任何建议和Redux实践建议都很棒！

Answer 1

我认为您应该多看看documentation，reduce就像...您的商店的一部分，包含数据，并根据您的操作更改数据。假设您只有一个reducer，您的状态数据将仅存在于其中一个（state.reducer）中。否则，它将散布到您创建的所有减速器上（使用combineReducers时）。这个示例略有修改，来自redux 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
  }
}

他们的示例使用switch / case，这是我所知道的更多偏好，但是当涉及到如何更改状态时，它们实际上并不调用setState（），它们只需要返回NEW状态对象根据action.type和action.xxx（潜在参数）的不同，针对特定的reducer（在您的情况下称为reducer）。在您的代码中，您只需要返回新状态即可！

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

然后，使用react-redux将React组件连接到商店（包含状态的东西）。这样一来，您就可以使用mapStateToProps访问整个状态树（使用mapDispatchToProps）和访问您的操作（以便您可以从反应中调用它们）！

这是我的第一个答案，希望它不会太乱！抱歉！

Redux，React用于单页面应用程序登录和注销

1 个答案: