reconstate v1.0.4

Reconstate

Eeasy state management and tracking of Provider/Subscribe/connect/dispatch relationships when using React's Context API

Demo

Check Demo

npm install reconstate

App.js

import { Provider } from 'reconstate';
const initState = {
    count: 1
}

const config = {
    persist: {
        storage: AsyncStorage // localStorage with web
    }
}

class App extends React.Component {
    render() {
        return (
            <Provider value={initState} config={config}>
                <YourAppComponent>
            </Provider>
        )
    }
}

Connect

import { connect } from 'reconstate'

class Counter extends React.PureComponent {
    render() {
        const { count, dispatch } = this.props
        return (
            <View style={{ flex: 1 }}>
                <Text>{count}</Text>
                <Button
                    onPress={() => dispatch(state => ({ count: state.count + 1 }))} title="+"
                />
            </View>
        )
    }
}

const mapStateToProps = (state, props) => ({
    count: state.count
})

export default connect(mapStateToProps)(Counter)

Subscribe

import { Subscribe } from 'reconstate'

class Subscriber extends React.PureComponent {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <Subscribe>
                    {({ count }) => {
                        return <Text>{count}</Text>
                    }}
                </Subscribe>
            </View>
        )
    }
}

getContext

import { getContext } from 'reconstate'


getContext(state => {
    // return global state
})
getContext().then(state => {
    // return global state
})

Dispatch

import { dispatch } from 'reconstate'

const count = value => {
    dispatch((state) => ({ count: state.count + value }))
}