Last active
November 11, 2019 16:31
-
-
Save chengsokdara/8d877f88a319a92e1d1b91a81540ecae to your computer and use it in GitHub Desktop.
StoRa component sample
This file contains 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, { useEffect } from "react"; | |
| import useStora from "@rawewhat/stora"; | |
| const App = () => { | |
| return ( | |
| <div> | |
| StoRa Demo | |
| <TestScreen /> | |
| <DemoScreen /> | |
| </div> | |
| ); | |
| }; | |
| const TestScreen = () => { | |
| const [states, actions] = useStora({ | |
| // add new action into testScreen actions | |
| mutate: { | |
| testScreen: { | |
| newTestAction: () => {} | |
| } | |
| } | |
| }); | |
| useEffect(() => { | |
| // fire up action using dot access | |
| actions.testScreen.testAction(); | |
| }, []); | |
| console.log("states", states, "actions", actions); | |
| return ( | |
| <button onClick={actions.testScreen.newTestAction}>Test Screen</button> | |
| ); | |
| }; | |
| const DemoScreen = () => { | |
| // get states and actions using destructuring syntax | |
| const [ | |
| { | |
| demoScreen: { newDemoState } | |
| }, | |
| { | |
| demoScreen: { demoAction } | |
| } | |
| ] = useStora({ | |
| // add a new state into demoScreen states retaining previous states | |
| mutate: { | |
| demoScreen: { | |
| newDemoState: "newDemoState" | |
| } | |
| }, | |
| // select only demoScreen states to return | |
| query: "demoScreen" | |
| }); | |
| console.log("states", states, "actions", actions); | |
| return <button onClick={() => demoAction(true)}>Demo Screen</button>; | |
| }; | |
| export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment