├── .gitignore
├── README.md
├── components
├── LocalCounter.js
├── MessageInput.js
├── Nav.js
└── PageWrapper.js
├── package.json
├── pages
├── index.js
└── other.js
├── store.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Nextjs and Freactal Example
2 |
3 | This example demonstrates the use of [freactal](https://github.com/FormidableLabs/freactal#freactal) with [Nextjs](https://github.com/zeit/next.js).
4 |
5 | The example is just a counter that maintains state between pages.
6 |
7 | Each page is wrapped with state for globally accessible state values. For local needs, state can be composed and the state needed at lower levels can be specified in their own store and composed. If you look at the `LocalCounter` component, you'll see that it has its own state, but also has access to the global state through its parent. The local state can be updated, but leaving the page and coming back reinitializes the local state, which leaving the global state untouched, just like we want.
8 |
--------------------------------------------------------------------------------
/components/LocalCounter.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { provideState, injectState, softUpdate } from 'freactal'
3 |
4 | const stateInitializer = {
5 | initialState: () => ({ localCounter: 0 }),
6 | effects: {
7 | localAddOne: softUpdate(state => ({ localCounter: state.localCounter + 1 }))
8 | }
9 | }
10 |
11 | const wrapInState = provideState(stateInitializer)
12 |
13 | export default wrapInState(injectState(({state, effects}) => {
14 | const handleInput = (evt) => effects.updateMessage(evt.target.value)
15 | return (
16 |