decx v1.0.9

The simplest React.js state management library which coexists with Redux

Decorator + Reducer

ALERT

You need to download babel plugin @babel/plugin-proposal-decorators

//in webpack.config.js

//the order should be identical
 [ "@babel/plugin-proposal-decorators", {"legacy":true}],
 ["@babel/plugin-proposal-class-properties", { "loose": true }]

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env',"@babel/preset-react"],
                    plugins:["@babel/plugin-proposal-object-rest-spread",
                    [
                      "@babel/plugin-transform-runtime",
                      {
                        "helpers": true
                      }
                    ],
                    "babel-plugin-styled-components",
                    [ "@babel/plugin-proposal-decorators", {"legacy":true}],
                    ["@babel/plugin-proposal-class-properties", { "loose": true }],
                    "@babel/plugin-syntax-jsx",
                    "@babel/plugin-transform-classes"
                    ],
                  }
                }
            }
        ]
      }

//in index.js
import {Store, DecxProvider,combinereducers} from "decx";

//custom reducers
const firstReducer = (state = 0, action) => {
    switch(action.type){
        case "INC":
        return state + payload;
        default:
        return state;
    }
}

const secondReducer = (state = "", action) => {
       switch(action.type){
        case "SCREAM":
        return `${state}!!!!`;
        default:
        return state;
    }
}

const reducers = combinereducers({
    number:firstReducer,
    text:secondReducer
})

const store = Store(reducers)

ReactDOM.render(
    <DecxProvider store={store}>
        <App/>
     </DecxProvider>
, document.getElementById('root'));

//in App.jsx
import React, {Component} from 'react';
import {listen,event,connect} from 'decx';
import AppChild from '..////'

@connect()
class AppContainer extends Component{
    //dispatch an action
    @event
    onClick = () => {
        //pass an object like redux action creator
        return {type:"INC",payload:5}
    }
    //listen a state change which happens in child component
    @listen
    renderText = (state) => {
      //if state is empty, render nothing
     if(Object.keys(state).length === 0) return   
     const {text} = state;
     return <p>{text}</p>
    }

    render(){
        return(
            <div>
                <button onClick={this.onClick}>Click to increase number</button>
                <AppChild/>
                {this.renderText()}
            </div>
        )
    }
}

//in AppChild.jsx
import React, {Component} from 'react';
import {listen,event,connect} from 'decx';

@connect()
class AppChild extends Component{
    //dispatch an action
    @event
    onClick = () => {
        //pass an object like redux action creator
        return {type:"SCREAM"}
    }
    //listen a state change which happens in parent component
    @listen
    rederNumber = (state) => {
      //if state is empty, render nothing
     if(Object.keys(state).length === 0) return   
     const {number} = state;
     return <p>{number}</p>
    }

    render(){
        return(
            <div>
                <button onClick={this.onClick}>Click to change text</button>
                {this.rederNumber()}
            </div>
        )
    }
}

export default AppChild