concent, a new way of managing your react state

hello concent

concent is a predictable、zero-cost-use、progressive、high performance's enhanced state management solution.

simple-demo

complex-demo

show you code

click me to experience code below

import React, { Component } from "react";
import ReactDom from "react-dom";
import { run, register, useConcent, registerDumb } from "concent";

/**
 * welcome to experience this demo, and fork to modify it. ^_^
 * concent build a ctx for every instance, it supplies state, sync, dispatch and etc ...
 * you can use them in any of components bellow
 * more details see doc: https://concentjs.github.io/concent-doc/api/explain
 * 
 * and your can copy left side bar other file's content to experience
 * like register-hook-comp.js ...
 * 
 * visit more demos:
 * https://stackblitz.com/edit/cc-multi-ways-to-wirte-code
 * https://stackblitz.com/edit/cc-4-render-mode
 * https://stackblitz.com/@fantasticsoul
 */

run({
  foo: {
    state: { greeting: "hello concent" },
    reducer: {
      changeGreeting(greeting) {
        return { greeting };
      }
    }
  }
});

function changeGreeting(greeting) {
  return { greeting };
}
const evValue = e => e.currentTarget.value;

function HookFnComp() {
  const ctx = useConcent("foo");
  //or use ctx.setState, ctx.dispatch, ctx.invoke instead
  const { state: { greeting },sync } = ctx;
  return (
    <>
      <h1>{greeting}</h1>
      <input value={greeting} onChange={sync("greeting")} />
    </>
  );
}

const RenderPropsComp = registerDumb("foo")(ctx => {
  const { state: { greeting }, setState} = ctx;
  //or use sync, ctx.dispatch, ctx.invoke  instead
  return (
    <>
      <h1>{greeting}</h1>
      <input
        value={greeting}
        onChange={e => setState({ greeting: e.currentTarget.value })}
      />
    </>
  );
});

@register("foo")
class HocClassComp extends Component {
  render() {
    const { greeting } = this.state; // or this.ctx.state
    const {invoke, sync, set, dispatch} = this.ctx;

    // dispatch will find reducer method to change state
    const changeByDispatch = e => dispatch("changeGreeting", evValue(e));
    // invoke cutomized method to change state
    const changeByInvoke = e => invoke(changeGreeting, evValue(e));
    // classical way to change state, this.setState equals this.ctx.setState
    const changeBySetState = e => this.setState({ greeting: evValue(e) });
    // make a method to extract event value automatically
    const changeBySync = sync('greeting');
    // similar to setState by give path and value
    const changeBySet = e=> set('greeting', evValue(e));

    return (
      <>
        <h1>{greeting}</h1>
        <input value={greeting} onChange={changeByDispatch} /><br />
        <input value={greeting} onChange={changeByInvoke} /><br />     
        <input value={greeting} onChange={changeBySetState} /><br />
        <input value={greeting} onChange={changeBySync} /><br />
        <input value={greeting} onChange={changeBySet} />
      </>
    );
  }
}

function App() {
  return (
    <>
      <h3>try input greeting.....</h3>
      <HookFnComp />
      <RenderPropsComp />
      <HocClassComp />
    </>
  );
}
ReactDom.render(<App />, document.getElementById("root"));