2.5.9 • Published 4 years ago

concent-test v2.5.9

Weekly downloads
4
License
MIT
Repository
github
Last release
4 years ago

English | 简体中文

🐮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.

npm.io

✨Features

💻 Playground

Templates

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

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

Install by npx command

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

or clone its source code by git command

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

Key features snippet

Online case

👨🏽‍Docs

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

📦Quick start

Make sure you have installed nodejs

Install

$ npm i --save concent

or yarn command

$ yarn add concent

Minimal example

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

import { run, register, useConcent } from 'concent';

// 1️⃣ Configure models
run({
  counter: {// declare a moudle named 'counter'
    state: { num: 1, numBig: 100 }, // define state
  },
  // you can also put another module here.
});

// 2️⃣  Now the react component can work with concent
@register('counter') // 👈 decorate your component with register
class DemoCls extends React.Component{
  // commit state to store and broadcast to other refs which also belong to counter module
  inc = ()=> this.setState({num: this.state.num + 1})
  render(){
    // here if read num, it means current ins render dep keys is ['num']
    return <button onClick={this.inc}>{this.state.num}</button>
  }
}
function DemoFn(){
  const { state, setState } = useConcent('counter'); // 👈 call useConcent hook in fn component
  const inc = ()=> setState({num: state.num + 1});
  return <button onClick={inc}>{state.num}</button>
}

Complete example

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

import { run, register, useConcent, defWatch } from 'concent';

run({
  counter: {
    state: { num: 1, numBig: 100 },
    computed: {
      numx2: ({ num }) => num * 2, // only num changed will trigger this fn
      numx2plusBig: ({ numBig }, o, f) => f.cuVal.numx2 + numBig // reuse computed reslult
    },
    reducer: {
      initState: () => ({ num: 8, numBig: 800 }),
      add: (payload, moduleState, actionCtx) => ({ num: moduleState.num + 1 }),
      addBig: (p, m, ac) => ({ numBig: m.numBig + 100 }),
      asyncAdd: async (p, m, ac) => {
        await delay(1000);
        return { num: m.num + 1 };
      },
      addSmallAndBig: async (p, m, ac) => {
        // hate string literal? see https://codesandbox.io/s/combine-reducers-better-7u3t9
        await ac.dispatch("add"); 
        await ac.dispatch("addBig");
      }
    },
    watch: {
      numChange: defWatch(({ num }, o) => console.log(`from ${o.num} to ${num}`), {immediate:true}),
      numChangeWithoutImmediate: ({ num }, o) => console.log(`from ${o.num} to ${num}`),
    },
    lifecycle: {
      // loaded: (dispatch) => dispatch("initState"), // [optional] triggered when module loaded
      // initState: async (moduleState) => {/** async logic */ return{num:666}}, // [optional] allow user load state async
      // initStateDone: (dispatch) => dispatch("addSmallAndBig"), // [optional] call any reducer fn after initState done
      mounted: (dispatch) => dispatch("initState"), // [optional] triggered when the first ins of counter module mounted
      willUnmount: (dispatch) => dispatch("initState") // [optional] triggered when the last ins of counter module unmount
    }
  }
});

@register("counter")
class DemoCls extends React.Component {
  render() {
    // mr is short of moduleReducer, now you can call counter module's all reducer fns by mr
    return <button onClick={this.ctx.mr.add}>{this.state.num}</button>;
  }
}

function DemoFn() {
  const { moduleComputed, mr } = useConcent("counter");
  return <button onClick={mr.add}>numx2plusBig: {moduleComputed.numx2plusBig}</button>;
}

🎲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。 redux-dev-tool

Use with plugin-loading

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

concent-plugin-loading online demo


🐚Who is using it

Communication

QQ-qroup-qr-code

👅License

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

2.5.6

4 years ago

2.5.5

4 years ago

2.5.8

4 years ago

2.5.7

4 years ago

2.5.9

4 years ago

2.5.2

4 years ago

2.5.1

4 years ago

2.5.4

4 years ago

2.5.3

4 years ago

2.4.9

4 years ago

2.4.7

4 years ago

2.4.8

4 years ago

2.4.6

4 years ago

2.4.5

4 years ago

2.4.4

4 years ago

2.4.3

4 years ago

2.4.2

4 years ago

2.4.1

5 years ago

2.3.7

5 years ago

2.3.6

5 years ago

2.3.5

5 years ago

2.3.4

5 years ago

2.3.3

5 years ago

2.3.2

5 years ago

2.3.1

5 years ago

2.2.39

5 years ago

2.2.38

5 years ago

2.2.37

5 years ago

2.2.36

5 years ago

2.2.35

5 years ago

2.2.34

5 years ago

2.2.33

5 years ago

2.2.32

5 years ago

2.2.31

5 years ago

2.2.30

5 years ago

2.2.29

5 years ago

2.2.28

5 years ago

2.2.26

5 years ago

2.2.27

5 years ago

2.2.25

5 years ago

2.2.24

5 years ago

2.2.22

5 years ago

2.2.23

5 years ago

2.2.21

5 years ago

2.2.19

5 years ago

2.2.20

5 years ago

2.2.18

5 years ago

2.2.17

5 years ago

2.2.16

5 years ago

2.2.15

5 years ago

2.2.14

5 years ago

2.2.13

5 years ago

2.2.12

5 years ago

2.2.11

5 years ago

2.2.10

5 years ago

2.2.9

5 years ago

2.2.8

5 years ago

2.2.7

5 years ago

2.2.6

5 years ago

2.2.3

5 years ago

2.2.5

5 years ago

2.2.4

5 years ago

2.2.1

5 years ago

2.2.0

5 years ago

2.2.2

5 years ago

2.1.17

5 years ago

2.1.16

5 years ago

2.1.15

5 years ago

2.1.14

5 years ago

2.1.13

5 years ago

2.1.12

5 years ago

2.1.11

5 years ago

2.1.10

5 years ago

2.1.9

5 years ago

2.1.8

5 years ago

2.1.7

5 years ago

2.1.6

5 years ago

2.1.5

5 years ago

2.1.4

5 years ago

2.1.3

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.38

5 years ago

2.0.37

5 years ago

2.0.36

5 years ago

2.0.35

5 years ago

2.0.33

5 years ago

2.0.34

5 years ago

2.0.31

5 years ago

2.0.32

5 years ago

2.0.30

5 years ago

2.0.28

5 years ago

2.0.29

5 years ago

2.0.27

5 years ago

2.0.26

5 years ago

2.0.25

5 years ago

2.0.24

5 years ago

2.0.23

5 years ago

2.0.22

5 years ago

2.0.21

5 years ago

2.0.19

5 years ago

2.0.20

5 years ago

2.0.18

5 years ago

2.0.17

5 years ago

2.0.15

5 years ago

2.0.16

5 years ago

2.0.13

5 years ago

2.0.14

5 years ago

2.0.11

5 years ago

2.0.12

5 years ago

2.0.9

5 years ago

2.0.10

5 years ago

2.0.7

5 years ago

2.0.8

5 years ago

2.0.6

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.2.42

5 years ago

1.2.40

5 years ago

1.2.39

5 years ago

1.2.35

5 years ago

1.2.38

5 years ago

1.2.36

5 years ago

1.2.37

5 years ago

1.2.34

5 years ago

1.2.33

5 years ago

1.2.32

5 years ago

1.2.23

5 years ago

1.2.24

5 years ago

1.2.27

5 years ago

1.2.28

5 years ago

1.2.25

5 years ago

1.2.29

5 years ago

1.2.30

5 years ago

1.2.31

5 years ago

1.2.21

5 years ago

1.2.22

5 years ago

1.2.20

5 years ago

1.2.18

5 years ago

1.2.19

5 years ago

1.2.16

5 years ago

1.2.15

5 years ago

1.2.14

5 years ago

1.2.13

5 years ago

1.2.12

5 years ago

1.2.10

5 years ago

1.2.11

5 years ago

1.2.9

5 years ago

1.2.8

5 years ago

1.2.7

5 years ago

1.2.6

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.0.39

5 years ago

1.0.38

5 years ago

1.0.37

5 years ago

1.0.36

5 years ago

1.0.35

5 years ago

1.0.34

5 years ago

1.0.33

5 years ago

1.0.32

5 years ago

1.0.31

5 years ago

1.0.30

5 years ago

1.0.29

5 years ago

1.0.28

5 years ago

1.0.27

5 years ago

1.0.26

5 years ago

1.0.25

5 years ago

1.0.24

5 years ago

1.0.22

5 years ago

1.0.23

5 years ago

1.0.21

5 years ago

1.0.20

5 years ago

1.0.19

5 years ago

1.0.18

5 years ago

1.0.17

5 years ago

1.0.16

5 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago