Created
February 11, 2017 19:54
-
-
Save NicoleRauch/df8849069ddbdfdb31fbf76700e86250 to your computer and use it in GitHub Desktop.
Example app to demonstrate that a react-flux Lifecycle component does not update its children on state changes
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
| {-# LANGUAGE TypeFamilies #-} | |
| {-# LANGUAGE DeriveGeneric #-} | |
| {-# LANGUAGE DeriveAnyClass #-} | |
| {-# LANGUAGE OverloadedStrings #-} | |
| module ReactFluxExample_Lifecycle where | |
| import Control.DeepSeq | |
| import Data.Monoid ((<>)) | |
| import Data.Typeable (Typeable) | |
| import GHC.Generics (Generic) | |
| import React.Flux | |
| import React.Flux.Lifecycle | |
| exampleApp :: ReactView () | |
| exampleApp = defineControllerView "ExampleApp" exampleStore $ \(ExampleState visible) () -> | |
| div_ $ do | |
| button_ [ onClick $ \_ _ -> dispatch ToggleVisible ] "Click here!" | |
| div_ . elemString $ "Outside: " ++ show visible | |
| lifecycleC_ $ do | |
| div_ . elemString $ "Inside: " ++ show visible | |
| lifecycleC :: ReactView () | |
| lifecycleC = defineLifecycleView "ALifecycleComponent" () lifecycleConfig | |
| { lRender = \_ _ -> childrenPassedToView | |
| } | |
| lifecycleC_ :: ReactElementM eventHandler () -> ReactElementM eventHandler () | |
| lifecycleC_ = view lifecycleC () | |
| data ExampleState = ExampleState | |
| { isVisible :: Bool | |
| } deriving (Show, Typeable) | |
| data ExampleAction = ToggleVisible | |
| deriving (Show, Typeable, Generic, NFData) | |
| instance StoreData ExampleState where | |
| type StoreAction ExampleState = ExampleAction | |
| transform action state = do | |
| putStrLn $ "Old state: " <> show state | |
| putStrLn $ "Action: " <> show action | |
| let newState = case action of | |
| ToggleVisible -> state { isVisible = not $ isVisible state } | |
| putStrLn $ "New state: " <> show newState | |
| return newState | |
| exampleStore :: ReactStore ExampleState | |
| exampleStore = mkStore $ ExampleState False | |
| dispatch :: ExampleAction -> [SomeStoreAction] | |
| dispatch a = [SomeStoreAction exampleStore a] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment