Use Context API and functional component as service in React

user_6582776 0
Viewed 2244

I have a context API:

import React, { createContext, useState } from "react";

const UserContext = createContext();

const UserContextProvider = (props) => {
    const [userInfo, setUserInfo] = useState({});

    return (
        <UserContext.Provider value={{ userInfo, setUserInfo }}>
            {props.children}
        </UserContext.Provider>
    )
};

export { UserContextProvider, UserContext };

and use it in App.js:

<UserContextProvider>
  // Router,...
</UserContextProvider>

Well, I gonna use context API in component like a service:

import { UserContext } from "...";

function UserService() {
    const { userInfo, setUserInfo } = useContext(UserContext);


    const updateUserInfo = (newUserInfo) => {
         setUserInfo(newUserInfo); // for example: {name:'x'}
    }

    return null;
}

Now I wanna use UserService inside a component without add <UserService /> ? How can I call UserService.updateUserInfo()?

reactjs
1 Answers

Your don't need to userService.You can use UserContext directly inside App.js and access to its function but you must wrap App.js inside UserContextProvider like:

<UserContextProvider>
   <App />
</UserContextProvider>

Or you can use HOC(higher order component) like:

const withUsersContext = (Comp) => {
    return (props) => (
        <UserContextProvider>
            <Comp {...props} />
        </UserContextProvider>
    );
};

// then inside App.js:
...
export default withUsersContext(App)

Now inside App.js:

const { userInfo, setUserInfo } = useContext(UserContext);

Note: if you wanna use UserContext inside something like UserService you must write a custom hook for UserService(rules of react-hooks).

Custom hooks for UserService:

function useUserService() {
    const { userInfo, setUserInfo } = useContext(UserContext);

    const updateUserInfo = (newUserInfo) => {
         setUserInfo(newUserInfo);
    }

    return { updateUserInfo };
}

How to use inside a component:

...
const { updateUserInfo }= useUserService();
...
user_131334600
Related