Provide example using Context API with custom _app.js

[RustyDev]

It would be great for those of us looking to use React's new Context API and the new custom _app.js in Canary to have an example app to view.

The custom app component persists state between pages and seems like a great way to make use of the Context API at the app container level. Please provide an example showing how to set this up with providers, consumers and multiple pages and how to best deal with server-side rendering and getInitialProps. Basically, how to replace Redux with Context.

[imbhargav5]

Exactly. I can give this a shot @timneutkens . Although replacing Redux with just context might be hard. I think SSR is really well done with Redux's reducers way.

[RustyDev]

There are libraries that are reduxish but even any global state example that uses _app.js, SSR and getInitialProps on various pages would be really appreciated. 🙏

[jaydenseric]

This would be blocked by #4194: Context provided in _app.js is undefined when consumed in pages during SSR.

[timneutkens]

The blocker has been fixed in Next.js 7 canary (next@canary).

[Xunnamius]

@timneutkens Thank you for your hard work! Is there any word on the OP's requested example?

[timneutkens]

Feel free to create one, should be relatively easy to figure out 👍

[wesbos]

I have an example if anyone wants to clean it up and turn it into a PR:

NoteProvider.js

import React, { Component } from 'react';

// first we will make a new context
const NoteContext = React.createContext();

// Then create a provider Component
class NoteProvider extends Component {
  state = {
    age: 100,
  };
  render() {
    return (
      <NoteContext.Provider
        value={{
          state: this.state,
          growAYearOlder: () =>
            this.setState({
              age: this.state.age + 1,
            }),
        }}
      >
        {this.props.children}
      </NoteContext.Provider>
    );
  }
}

// then make a consumer which will surface it
const NoteConsumer = NoteContext.Consumer;

export default NoteProvider;
export { NoteConsumer };

_app.js

import App, { Container } from 'next/app';
import NoteProvider from '../components/NoteProvider';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
          <NoteProvider>
            <Component {...pageProps} />
          </NoteProvider>
      </Container>
    );
  }
}

export default MyApp;

Then some page with that component on it:
NoteList.js

import React, { Component } from 'react';
import { NoteConsumer } from './NoteProvider';

class NotesList extends Component {
  render() {
    return (
      <div>
        <NoteConsumer>
          {({ state, growAYearOlder }) => (
            <p>
              hi I'm {state.age}
              <button onClick={growAYearOlder}>Grow</button>
            </p>
          )}
        </NoteConsumer>
      </div>
    );
  }
}
export default NotesList;

[maurodaprotis]

@wesbos i just try your code. But whenever it's server side rendered i get "Cannot read property 'state' of undefined" on NotesList. Works fine on client side render.

I'm on next 6.1.2

[wesbos]

You need next@canary - it’s in 7.0 On September 12, 2018 at 6:31 PM, maurodaprotis (notifications@github.com) wrote: @wesbos ( https://github.com/wesbos ) i just try your code. But whenever it's server side rendered i get "Cannot read property 'state' of undefined" on NotesList. Works fine on client side render. I'm on next 6.1.2 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub ( #4182 (comment) ) , or mute the thread ( https://github.com/notifications/unsubscribe-auth/AAKvjS2J2U6eEKqFmN7gDB4drr6dfFYtks5uaYsvgaJpZM4Tc3o- ) .