English | 简体中文

⚡️ State management that tailored for react, it is simple, predictable, progressive and efficient.

🐮Introduction

Concent is an amazing state management tool, supported by a healthy middleware ecosystem and excellent devtools. It is a predictable, zero-invasive, progressive, high-performance react development framework!

Concent encourages simplicity. It saves you the hassle of creating boilerplate code and gives powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.

recommend next verion lib: helux

✨Features

• Provider less
• Render context injected automatically (no any annoying boilerplate code)
• Dependency collection at runtime (state & computed)
• Unified logic reuse of class and function components
• Optional Compostion api support
• Optional modular development support(state、reducer、computed、watch、lifecycle)
• High performance renderKey mechanism
• Centralization and De-centralization module configuration both support
• Dynamic module configuration support
• Reducer combination support
• React Devtools support
• Hot-reload support
• SSR&Nextjs support
• React-native support

💻 Playground

Templates

• tntweb-admin

A best practise project(git) building by concent & typescript.

1$ git clone https://github.com/tnfe/concent-pro        (dev with webpack)
2$ git clone https://github.com/tnfe/vite-concent-pro   (dev with vite)

• cra-template-concent-ts

Install by npx command

1$ npx create-react-app my-app --template concent-ts

or clone its source code by git command

1$ git clone https://github.com/concentjs/cra-project-concent-ts

Key features snippet

• Dep collection of state
• Dep collection of computed
• Combine reducers
• Composition api
• Ref lifecycle method
• Flexible top api

Online case

• A standard js project with concent-eco lib
• A standard ts project with concent-eco lib
• Todo-mvc-concent vs Todo-mvc-redux
• Calculator-concent vs Calculator-hook
• Concent query list & Concent Shared query list vs Hook query list
• Concent-nextjs-ssr

👨🏽‍Docs

Visit official website https://concentjs.github.io/concent-doc to learn more.

📦Quick start

Make sure you have installed nodejs。

Install

1$ npm i --save concent

or yarn command

1$ yarn add concent

Minimal example

See how easy it is to use concent to manage react state.

1import { run, register, useConcent } from 'concent';
2
3// 1️⃣ Configure models
4run({
5  counter: {// declare a moudle named 'counter'
6    state: { num: 1, numBig: 100 }, // define state
7  },
8  // you can also put another module here.
9});
10
11// 2️⃣  Now the react component can work with concent
12@register('counter') // 👈 decorate your component with register
13class DemoCls extends React.Component{
14  // commit state to store and broadcast to other refs which also belong to counter module
15  inc = ()=> this.setState({num: this.state.num + 1})
16  render(){
17    // here if read num, it means current ins render dep keys is ['num']
18    return <button onClick={this.inc}>{this.state.num}</button>
19  }
20}
21function DemoFn(){
22  const { state, setState } = useConcent('counter'); // 👈 call useConcent hook in fn component
23  const inc = ()=> setState({num: state.num + 1});
24  return <button onClick={inc}>{state.num}</button>
25}

Complete example

Move logic to reducer and define computed,watch,lifecycle
try edit this demo、 👉better js demo、👉better ts demo

1import { run, register, useConcent, defWatch } from 'concent';
2
3run({
4  counter: {
5    state: { num: 1, numBig: 100 },
6    computed: {
7      numx2: ({ num }) => num * 2, // only num changed will trigger this fn
8      numx2plusBig: ({ numBig }, o, f) => f.cuVal.numx2 + numBig // reuse computed reslult
9    },
10    reducer: {
11      initState: () => ({ num: 8, numBig: 800 }),
12      add: (payload, moduleState, actionCtx) => ({ num: moduleState.num + 1 }),
13      addBig: (p, m, ac) => ({ numBig: m.numBig + 100 }),
14      asyncAdd: async (p, m, ac) => {
15        await delay(1000);
16        return { num: m.num + 1 };
17      },
18      addSmallAndBig: async (p, m, ac) => {
19        // hate string literal? see https://codesandbox.io/s/combine-reducers-better-7u3t9
20        await ac.dispatch("add"); 
21        await ac.dispatch("addBig");
22      }
23    },
24    watch: {
25      numChange: defWatch(({ num }, o) => console.log(`from ${o.num} to ${num}`), {immediate:true}),
26      numChangeWithoutImmediate: ({ num }, o) => console.log(`from ${o.num} to ${num}`),
27    },
28    lifecycle: {
29      // loaded: (dispatch) => dispatch("initState"), // [optional] triggered when module loaded
30      // initState: async (moduleState) => {/** async logic */ return{num:666}}, // [optional] allow user load state async
31      // initStateDone: (dispatch) => dispatch("addSmallAndBig"), // [optional] call any reducer fn after initState done
32      mounted: (dispatch) => dispatch("initState"), // [optional] triggered when the first ins of counter module mounted
33      willUnmount: (dispatch) => dispatch("initState") // [optional] triggered when the last ins of counter module unmount
34    }
35  }
36});
37
38@register("counter")
39class DemoCls extends React.Component {
40  render() {
41    // mr is short of moduleReducer, now you can call counter module's all reducer fns by mr
42    return <button onClick={this.ctx.mr.add}>{this.state.num}</button>;
43  }
44}
45
46function DemoFn() {
47  const { moduleComputed, mr } = useConcent("counter");
48  return <button onClick={mr.add}>numx2plusBig: {moduleComputed.numx2plusBig}</button>;
49}

🎲Eco-lib examples

Use with react router

Details see here react-router-concent，expose history，you can call it anywhere in your app to enjoy the imperative navigation jump.

react-router-concent online demo

Use with redux-dev-tool

Details see here concent-plugin-redux-devtool，track your state changing history。

Use with plugin-loading

Details see here concent-plugin-loading，control all your reducer function's loading status easily。

concent-plugin-loading online demo

---

CDN resource

• cdnjs
  https://cdnjs.com/libraries/concent

• cdn.bytedance
  https://cdn.bytedance.com/?query=concent

• jsdelivr
  https://www.jsdelivr.com/package/npm/concent

• unpkg
  https://unpkg.com/concent

🐚Who is using it

tcb-admin

wink

Communication

👅License

concent is released under the MIT License. http://www.opensource.org/licenses/mit-license