React redux, logout and loggin using store dose not update the pages

Asked
Active3 hr before
Viewed126 times

8 Answers

storereduxusingreact
90%

The issue is that you have two reducers (userIdLogedIn and userReducer) that should be consolidated.,The userIdLogedIn state you're using in the components comes from:,You should be able to remove the userIdLoggedIn completely and use the userReducer state in your components e.g.

The userIdLogedIn state you're using in the components comes from:

export function userIdLogedIn() {
   return false;
}

You should be able to remove the userIdLoggedIn completely and use the userReducer state in your components e.g.

function mapToProb(state: {
   userIdLogedIn: boolean
}) {
   return {
      userIdLogedIn: state.userReducer.userIdLogedIn
   }
}
load more v
88%

08 Jun 2018 - Updated tutorial to React 16.4.0 and added auto-logout on "401 Unauthorized" response from the server,27 Sep 2017 - Updated tutorial to React 16.0.0 and Webpack 3.6,20 Nov 2019 - Updated to React 16.12.0 and posted tutorial on how to deploy the React app to AWS with a Node.js backend

Pretag
 Pretag team - issue, fix, solve, resolve
72%

Update: OK so I did a bit more testing, and it seems that:,Was there any changes recently to Authenticator/withAuthenticator that would have caused this? I took a quick look but didn't see anything that jumped out.,Thanks @vutronic - Presumably with your solution below you did need to pass the onStateChange function down into the app component as it doesn't automatically get passed down?

// main component (index.js or something)
import MainApp from './App.js'
class AuthWrapper extends React.Component {
  rerender = () => this.forceUpdate()
  render() {
    return <MainApp rerender={this.rerender} />
  }
}

// component that is being wrapped with withAuthenticator component
class App extends Component {
  signOut = async () => {
    await Auth.signOut()
    this.props.rerender()
  }
  render() {
    return (
      <div style={styles.container}>
        <p style={styles.welcome}>Hello World</p>
      </div>
    );
  }
}

// new default export for withAuthenticator (this is to receive props & force the rerender)
export default props =>  {
  const AppComponent = withAuthenticator(App)
  return <AppComponent {...props} />
}
load more v
65%

And redirect them back to the login page after they logout., Also, import useHistory from React Router in the header of src/containers/Login.js., Import useHistory from React Router in the header of src/App.js.

const history = useHistory();
load more v
75%

– The App page is a container with React Router. It gets app state from Redux Store. Then the navbar now can display based on the state.,This is a custom history object used by the React Router.,The Auth reducer will update the isLoggedIn and user state of the application.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Our redux setup is ready. Now lets configurate Authentication form. For this we will use Formik. Type the following into your terminal:,At the bottom we can import the action creators and export them directly or use them within async actions, like login and logout.,I hope you liked this simple Redux Tutorial. You can find complete code repository presented in this article at GitHub.

For this redux tutorial lets start with setup new react application with CRA:

npm install - g create - react - app
create - react - app redux - tutorial
cd redux - tutorial
load more v
22%

It does not modify the component class passed to it; instead, it returns a new, connected component class that wraps the component you passed in.,The mapStateToProps and mapDispatchToProps deals with your Redux store’s state and dispatch, respectively. state and dispatch will be supplied to your mapStateToProps or mapDispatchToProps functions as the first argument.,The number of declared function parameters of mapStateToProps and mapDispatchToProps determines whether they receive ownProps

function connect(mapStateToProps ? , mapDispatchToProps ? , mergeProps ? , options ? )
load more v
60%

Change the index route to LoginPage because we want users to land on the login component when they visit the home page. Before doing that, import it from components folder.,For routing to work, first make a new component inside the components folder. Name it loginPage.js and place the below code inside this component.,It is time for us to login the user after they are registered. Go ahead and open components/loginPage.js file and update it with the following contents.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "store-redux" queries related to "React redux, logout and loggin using store dose not update the pages"