Discussion: Many providers in application.

Hi !! 😃 Rafael here again. lol

I have a provider as below:

import React, { useReducer } from "react";
import { createContainer } from "react-tracked";

const reducer = (state, newObject) => { return { ...state, ...newObject } };

export const { Provider, useTracked: useContainerState } = createContainer(
    () => useReducer(reducer, {})
);

export const ContainerProvider = ({ children }) => <Provider> {children} </Provider> ;

And I’m using that provider wrapping any route of my application. To create a context to any component route.

const PrivateRoute = ({ component: Component, ...rest }) => {
    return (
        <Route
            {...rest}
            render={props => validLogin()
                ? <ContainerProvider> <Component {...props} {...rest} /> </ContainerProvider>
                : <Redirect to="/login"/>
            }
        />
    );
};

const WorkflowRoutes = () => (
    <Switch>
        <PrivateRoute exact path="/dashboard" component={Dashboard} />
        <PrivateRoute exact path="/audit" component={Audit} />
    ....

The problem is…
If I access the dashboard module and then access the audit module, the object contained in the state (useTracked) in audit module will have all the objects that were in the dashboard. It is sharing the data instead of having one provider for each module.

Is there any way to create a unique provider for each module? I imagine this is happening because the reducer is not being created in ContainerProvider. Is there any way around this?

Thanks a lot again !

Rafael.

[rbgfloripa]

yes of course. I’ll create a sandbox and sent it to you as soon as it’s ready. Thanks.

[dai-shi]

No problem! Keep trying and find possible bugs!

Let me close this issue. If anybody finds a similar issue, please open a new issue.