Created
February 10, 2020 22:20
-
-
Save adamkl/656008691d42220eddf8bfe147753063 to your computer and use it in GitHub Desktop.
xState service layer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { createUserSessionService } from "services/UserSessionService"; | |
import { createNavService } from "services/NavService"; | |
// Wiring up our "IOC container" | |
const userSessionService = createUserSessionService(); | |
// NavService depends on UserSessionService | |
const navService = createNavService(userSessionService); | |
const dependencies = { | |
userSessionService, | |
navService | |
}; | |
const AppContext = React.createContext(dependencies); | |
const AppContextProvider: React.FC = props => { | |
return ( | |
<AppContext.Provider value={dependencies}> | |
{props.children} | |
</AppContext.Provider> | |
); | |
}; | |
export { AppContext, AppContextProvider }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import ReactDOM from "react-dom"; | |
import App from "App"; | |
import { AppContextProvider } from "AppContextProvider"; | |
// Wrapping our app in our "IOC container" | |
ReactDOM.render( | |
<AppContextProvider> | |
<App /> | |
</AppContextProvider>, | |
document.getElementById("root") | |
); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useContext } from "react"; | |
import { Machine, interpret, Interpreter } from "xstate"; | |
import { useService } from "@xstate/react"; | |
import { AppContext } from "AppContextProvider"; | |
import { config, UserSessionContext, UserSessionStateSchema, UserSessionEvent } from "./machine"; | |
// Custom hook for "dependency injection" | |
export const useUserSessionService = () => { | |
const { userSessionService } = useContext(AppContext); | |
return useService(userSessionService); | |
}; | |
export const createUserSessionService = (): UserSessionService => { | |
const userSessionMachine = Machine<UserSessionContext, UserSessionStateSchema, UserSessionEvent>(config); | |
return ( | |
interpret(userSessionMachine) | |
.start() | |
); | |
}; |
Yep, you got it @veeral-patel. That’s exactly what we are doing.
The code in the gist is simplified a bit, and excludes the actual state machine logic (which can be pretty complex), but gives an accurate picture of how we wire everything up and use the machines in our React components.
@adamkl Got it. What I'm getting from this is that using xstate
state in my components is similar to using MobX state in my components.
The value of choosing xstate over MobX likely becomes apparent when writing code to model and manipulate your state.
Could you share a couple of things that xstate makes easy compared to other libraries? What's your favorite thing about using it?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey @adamkl - is my understanding of your code correct?
You create two services: a
navService
and auserSessionService
by calling helper functions. You then pass these services globally using Context.These helper functions initialize, start, and return new state machines using
xstate
. Unfortunately the code for these state machines is not shared.You write
useNavService
anduseUserSessionService
hooks to make it easy to access these services within the app.