Nesting and overriding new React Context API

While learning react-router v4 I read some of their source code. And as we know they are using current context for passing down router and route info overriding previous/parent route info

ReactTraining / react-router

Declarative routing for React

React Router

Declarative routing for React

Docs

View the docs here

Migrating from 2.x/3.x?

3.x docs

2.x docs

Packages

This repository is a monorepo that we manage using Lerna. That means that we actually publish several packages to npm from the same codebase, including:

Package	Version	Docs	Description
react-router			The core of React Router
react-router-dom			DOM bindings for React Router
react-router-native			React Native bindings for React Router
react-router-config			Static route config helpers

Redux users: The react-router-redux package is now deprecated. See Redux Integration for a better approach.

Changes

Detailed release notes for a given version can be found on our releases page.

For change notes prior to version 4, please see the CHANGES.md file.

Funding

You may provide financial support for this project by donating via Open Collective, attending one of our workshops, or purchasing one of our online courses. Thank you for your…

View on GitHub

getChildContext() {
  return {
    router: {
      ...this.context.router,
      route: {
        location: this.props.location || this.context.router.route.location,
        match: this.state.match
      }
    }
  };
}

React team announced new Context API that no longer will be deprecated in React v16.3.0, that is already released :)

https://github.com/facebook/react/releases/tag/v16.3.0

Now I was thinking how ReactTraining will make this overriding using new Context API.
From start I used create-react-context polyfill for new context. It works exactly, just change the import.

import { render } from "react-dom";
import React, { createContext } from "react";
// import createContext from "create-react-context";

Next we need to create the context. Context has a Consumer and a Provider

const { Provider, Consumer } = createContext();

Provider is used to pass to him some data in value prop

render() {
    return (
        <Provider value={"React is Awesome!"}>
            nested content...
        </Provider>
    )
}

And Consumer is used to consume that value using render props

render() {
    return (
        <Consumer>
            {(theValue) => {
                return theValue
            }}
        </Consumer>

        // shorthand
        <Consumer>
            {theValue => theValue}
        </Consumer>
    )
}

// output
// React is Awesome!

We may use the Consumer how many times we want.

Now back to our overriding. Here is my app

const App = () => (
  <Provider value={{ location: "/" }}>
    <NestedPath>
      <NestedPath location="haha/">
        <NestedPath>
          <NestedPath>
            <NestedPath>
              <NestedPath />
            </NestedPath>
          </NestedPath>
        </NestedPath>
      </NestedPath>
    </NestedPath>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById("root"));

And here is the output

/
/location/
/location/haha/
/location/haha/location/
/location/haha/location/location/
/location/haha/location/location/location/

And this is my NestedPath component

const NestedPath = ({ location = "location/", children }) => (
    <Consumer>
        {router => (
            <React.Fragment>
                <div>{router.location}</div>
                <Provider value={{ ...router, location: router.location + location }}>
                    {children || null}
                </Provider>
            </React.Fragment>
        )}
    </Consumer>
);

Here as you see inside Provider we override previous one with a new value. And all child Consumers now will take the new value.

Here is a sandbox to play with

https://codesandbox.io/s/lrvv8w784q

Thanks for reading!!! This is a duplicate of my Medium Story!
dev.to is new medium for developers :)

Comments

[Eyal L]

Great Article. Thank you.

[bindhu]

Hi,

How we can add API to the React Redux and give some example?

[🥑 Andrew Luca]

What do you mean? Is this related to React Context API?

[bindhu]

Can you Please explain with Register Form?

[bindhu]

YES

[🥑 Andrew Luca]

Please explain your use case and I'll try to help. Give me some context of what you want to do.

[bindhu]

Example In Registration Form When i am trying to register with the Name,Email and Phone Number it can't stored in redux could you please explain How to perform GET and POST methods into my redux using API calls.

Here is my code..

export function setName(name)
return{
type:"UPDATENAME",
payload: new Promise((resolve,reject)=>{
resolve(name);
})

}

}

[Marcos]

Hey man, great tutorial! I was searching for something like this. Thank you!