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?

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