Redux, React for single page application login and logout - reactjs

Question

I'm trying to use redux for a single page application. The reasoning behind that is if there's a logout due to token validation timeout or an error I can call the store from the children components and set actions respectively to be called, but I'm not sure how to do this and I'm not 100% sure this is probably usage of 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,
}
}
Below is my sample code. What I was going to do is create the actions then pass the store down to children components that make REST calls and if the response for any of the REST calls was 401 with a timed out message it'd dispatch an action telling this main page to set loggedin to false. Any suggestions and Redux practice advice would be great!

Answer 1

I think you should look at some more documentation, a reducer is like... a chunk of your store, containing data, and changing that data based on your actions. let's say you only have one reducer, your state data will live inside of solely that one (state.reducer). Otherwise it will be spread out over all the reducers you create(when using combineReducers). This slightly modified example comes from the redux reducers documentation:
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
}
}
their examples use switch/case, this is more of a preference from what I know, but when it comes to how to change state, they don't actually call setState(), they only need to return the NEW state object for that particular reducer(in your case it's called reducer) based on what the action.type and action.xxx(potential parameters) are. In your code, you need only return the new state!
// 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 });
}
}
Then, using react-redux, you connect your React component to your store(the thing that contains your state). And that gives you access to the whole state tree(using mapStateToProps) and access to your actions(so that you can call them from react) with mapDispatchToProps!
This is my first answer, hope it's not too messy! Sorry!