Why a state is not resolved as a variable in nextjs

» javascript » Why a state is not resolved as a variable in nextjs

By : David

Date : December 01 2020, 04:52 PM

should help you out The issue based on the code you have now, is that you're not passing user down to the Landing component. If you update your home page with the following changes, you're code should work.

code :

import Landing from "./Landing"
import React from "react";

class Home extends React.Component {

    render() {
        return (
            <div>
                {this.props.user.displayName}
                <Landing user={this.props.user}/>
            </div>
        )
    }
}

export default Home;

import Landing from "./Landing"
import React from "react";

export const UserContext = React.createContext({});

class Home extends React.Component {

    render() {
        return (
            <div>
                {this.props.user.displayName}
                <UserContext.Provider value={this.props.user}>
                  <Landing user={this.props.user}/>
                </UserContext.Provider>
            </div>
        )
    }
}

export default Home;

import React from 'react';
import UserContext from './Home';

const Landing = () => {
    const user = React.useContext(UserContext);
    return (
      <div>
        {user.displayName}
      </div>
    )
}
export default withStyles(useStyles)(Landing);

Share :

Accessing redux state when dispatch called in NextJS getInitialProps

By : Keshav

Date : March 29 2020, 07:55 AM

seems to work fine Ok. Reading up some GH issues I found that using redux-api-middleware in SSR is somewhat problematic. I believe that part of the issue is that it doesn't appear to return a promise from dispatch that can be used with async/await. Additionally one should ideally use getInitialProps for its intended purpose so let's return the props there directly.
I've switched to redux-axios-middleware and it works like a charm.

code :

static async getInitialProps ({ store }) {
  await store.dispatch(fetchProducts())
  return { products: getProducts(store.getState()) }
}

Set State Using getInitialProps of Nextjs for firebase DB

By : Marc Kay

Date : March 29 2020, 07:55 AM

fixed the issue. Will look into that further The getInitialProps is only executed once, either server-side (when you first load a page of the website), or client-side (when you navigate to another page using a Link).
Here are the changes you should do:

NextJS - Passing state to children as props in custom app

By : Shyamal Kejriwal

Date : March 29 2020, 07:55 AM

seems to work fine I have this ./pages/_app.js from the official docs: , pass what you want just as you pass usual props

code :

<Component whatyouwant={propsyouwant} />

class MyApp extends App {

  static async getInitialProps({ Component, router, ctx }) {

    let pageProps = {}
    const { req } = ctx
    var MobileDetect = require('mobile-detect')
    const md = new MobileDetect(req ? req.headers['user-agent'] : "")
    const phone = md.phone()
    const tablet = md.tablet()

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return {  pageProps,  
              phone: phone, 
              tablet: tablet }
  }


  render () {

    const {Component, pageProps, phone, tablet} = this.props
    return (
      <Container>
        <Provider store={reduxStore}> 
            <Nav /> 
            <Component {...pageProps} phone={phone} tablet={tablet} />
            <Footer />
        </Provider>
      </Container>
    )
  }
}

export default withReduxStore(MyApp)

component not picking up new state of a variable changed inside a resolved ES6 promise call

By : NYTAMC

Date : March 29 2020, 07:55 AM

it should still fix some issue The ES6 promises used by async / await are not integrated with the AngularJS framework and its execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.
One approach is to wrap the ES6 promise in $q.when:

code :

  $q.all(pArray)
    .then(function (data) {
        // get api data now    
        $q.when(fetchData()).then(done => {
            vm.loading = false; // reaching here well
        })    
  })

React, Redux, NextJS Weird state race overrides

By : Jason

Date : March 29 2020, 07:55 AM

help you fix your problem I am pretty sure your reducers will overwrite your current state when returning initialState. See this answer on GitHub.
There are no known race conditions or other problems related to multiple root stores nor reducers in next-redux-saga.