Package Exports

@loggo/state

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@loggo/state) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

findingnemo

State Management for React

This is a library, which uses "localStorage" for State Management in React. The Idea is to minimalize the complexity of State Management in React.

https://www.youtube.com/watch?v=W-NSDE3Rhlk

1. Install a fresh reacte-react-app or use your existing React Application

2. In you index.js, generally under /src/index.js

// 1. importing the Library
import State from 'findingnemo'

ReactDOM.render(<App />, document.getElementById('root'), function() {
    // 2. Initialize the Library
    State.init()
});

3. In your Component A set your Initial State, finally connect the State (in componentDidMount)

import React from 'react'
import State from 'findingnemo'

export default class ComponentA extends React.Component {
    constructor() {
        super()
        // 1. Initial State
        this.state = {
            place: State.getItem('place') || {name: 'Hamburg'}
        }
    }

    componentDidMount() {
        // 2. Connect the State
        // Always if you do: State.setItem('place', {name: 'Berlin'}), the State of this Component changes!
        State.connect(this, 'place')
    }

    render() {
        return this.state.place.name
    }
}

4. Now in Component B you can change the place with State.setItem(), the State changes, and all Components which are connected to place change

import React from 'react'
import State from 'findingnemo'

export default class ComponentB extends React.Component {

    render() {
        return (
            <div>
                <button onClick={() => {State.setItem('place', {name: 'Berlin'})}}>Berlin</button>
                <button onClick={() => {State.setItem('place', {name: 'Hamburg'})}}>Hamburg</button>
            </div>
            )
    }
}

Initial State

State.init({ place: { name: 'Berlin' } })

Develop and Build

We are going to use rollup for build the main.js:

    npm install --global rollup

Just run npm run build for building the bundle.js.

Roadmap: What is coming in Next Version?

State.removeItem() or State.resetItem() Should set to initialState again.
A proposal structure to store the actions of the Application in a MVC way!
Offline first, independet views from loading data