快速上手#

import { run } from 'concent';

run({ foo });

import ReactDOM from 'react-dom';

function App(){
  return (
    <div>
      <HelloConcent />
      <HelloConcent />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

// 渲染未用到age，但只要age改变了依然会触发当前组价实例渲染
function BadCase(){
  const { state:{name, age} } = useConcent('foo');
  return <h1>only use name: {name} </h1>
}

// 删掉age，保持组件最小的依赖列表
function GoodCase(){
  const { state:{name} } = useConcent('foo');
  return <h1>only use name: {name} </h1>
}

function BadCase(){
  const { state:{name, needShow, age} } = useConcent('foo');
  return <h1>use name: {name} {needShow? `or age ${age}`: ''}</h1>
}

function GoodCase(){
  const { state:{name, needShow} } = useConcent('foo');
  return <h1>use name: {name} {needShow? `or age ${stage.age}`: ''}</h1>
}

const foo = {
  state: { ... },
  reducer: {
    changeName(name) {
      return { name };
    },
    async changeNameAsync(name) {
      await api.track(name);
      return { name };
    },
    async changeNameCompose(name, moduleState, actionCtx) {
      await actionCtx.setState({ loading: true });
      await actionCtx.dispatch('changeNameAsync', name);
      return { loading: false };
    }
  }
}

├── modules
    ├── foo
        ├── state.js
        ├── reducer.js
        ├── computed.js
        ├── watch.js
        ├── lifecycle.js
        ├── index.js
    ├── bar
        ├── ...

@register('foo')
class HelloComp extends Component {
  changeName = (e)=>{
    // this.setState({name:e.currentTarget.value})

    // 替代dispatch字符串调用方式
    this.ctx.mr.changeName(e.currentTarget.value);
    // this.ctx.dispatch('changeName', e.currentTarget.value);
  }
}

// code in models/foo/computed.js

//当age发生变化时，对age做计算,
export function age({age}) {
  return age * 2;
}

//对firstName, lastName任意一个值发生变化时，计算新的fullName
export function fullName(newState, oldState, fnCtx){
  // fnCtx.setted查看提交的状态key列表
  // fnCtx.changed查看提交的状态key列表里发生了变化的key列表
  // fnCtx.retKey查看当前函数的计算结果对应key，当前示例为 fullName
  return `${newState.firstName}_${newState.lastName}`;
}

// 更推荐上面的写法，在参数里解构时确定输入的数据依赖
export const fullName = {
  fn(newState, oldState, fnCtx) {
    // logic code
  },
  depKeys: ['firstName', 'lastName'],//这里定义触发fullName计算的依赖key列表
}

// good case
export function funnyName(newState, oldState, fnCtx){
  // 表示当前计算函数依赖是 firstName 和 lastName
  const { firstName, lastName } = newState;
  if(firstName.length > 20){
    return `${firstName}_${lastName}`;
  }else{
    return `${firstName}_2short`;
  }
}

// bad case
export function funnyName(newState, oldState, fnCtx){
  // 此函数的依赖可能是firstName lastName 或 firstName
  if(newState.firstName.length > 20){
    return `${newState.firstName}_${newState.lastName}`;
  }else{
    return `${newState.firstName}_2short`;
  }
}

import { defComputed } from 'concent';

export const hobbies = defComputed(
  ({hobbies}) => hobbies.length * 2, 
  {compare: true},// 此时reducer里返回hobbies时，必需走immutable写法了
)

// code in models/foo/watch.js
import { defWatch } from 'concent';

// age和stateKey同名，表示当age发生变化时触发此函数
export function age() {
  api.track('ageChanged');
}

//对firstName, lastName任意一个值发生变化时，触发此函数
export const fullName = defWatch(
  (newState, oldState, fnCtx) => {
    // fnCtx.changed查看提交的状态key列表里发生了变化的key列表
    const { changed } = fnCtx;
    if(changed.includes('firstName'))api.track('firstNameChanged');
    if(changed.includes('lastName'))api.track('lastNameChanged');
  },
  // 人工定义触发fullName watch回调的依赖key列表
  depKeys: ['firstName', 'lastName'],
)

// 或写为解构时确定依赖
export function fullName2({firstName, lastName}, oldState, fnCtx){
  const { changed } = fnCtx;
  if(changed.includes('firstName'))api.track('firstNameChanged');
  if(changed.includes('lastName'))api.track('lastNameChanged');
}

// code in models/foo/lifecyle.js
import * as rd from './reducer';

export async function initState(){
  const data = await api.fetData();
  return data;
}

// code in models/foo/lifecyle.js
import * as rd from './reducer';

export function initStateDone(dispatch, moduleState){
  dispatch(rd.nextStep);
}

// code in models/foo/lifecyle.js
import * as rd from './reducer';

export function loaded(dispatch, moduleState){
  dispatch(rd.initState);//调用reducer里的状态初始化函数
}

// code in models/foo/lifecyle.js
import * as rd from './reducer';

export function mounted(dispatch, moduleState){
  dispatch(rd.initState);//调用reducer里的状态初始化函数
}

export function mounted(dispatch, moduleState){
  dispatch(rd.initState);
  return false;
}

export function willUnmount(dispatch, moduleState){
  dispatch(rd.clearUp);
  return false;
}

@register({ module: 'bar', connect: ['foo', 'baz'] })
class BarComp extends Component {
  render() {
    const bazState = this.state;
    //获得连接模块的状态
    const { foo:fooState, bar:bazState } = this.ctx.connectedState;
    //获得连接模块的计算结果
    const { foo:fooCu, baz:bazCu } = this.ctx.connectedComputed;
  }
}

  this.ctx.dispatch('changeName', 'newName');
  //等同于写为
  this.ctx.dispatch('bar/changeName', 'newName');

  // 推荐写为直接调用的方式
  this.ctx.moduleReducer.changeName('newName');
  // or
  this.ctx.mr.changeName('newName');

  //如果我们要显示的去触发其他模块的reducer函数，可以写为
  this.ctx.dispatch('foo/changeName', 'newName');

this.ctx.dispatch('foo/changeName', 'newName');
// 改为
this.ctx.cr.foo.changeName('newName');

@register('foo')
class HelloComp extends Component {
  $$setup(ctx) {
    ctx.watch('type', ({type})=>{
      ctx.dispatch('fetchDataWhileTypeChanged', type);
    });
  }
  render() {
    //这里用了一个sync语法糖函数，自动将onChange事件里的value值同步到state.type下
    return (
      <select value={this.state.type} onChange={this.ctx.sync('type')}>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    );
  }
}

import { register } from 'concent';

@register('foo')
class HelloComp extends Component {
  $$setup(ctx) {
    //call ctx.effect、ctx.computed、ctx.watch etc
  }
  render() {
    const {
      refComputed, moduleComputed, connectedComputed,
      connectedState, state, settings, dispatch, sync
      // etc ...
    } = ctx;
    // return ui
  }
}

// ----------------------------
import { useConcent } from 'concent';

const setup = ctx => {
  //call ctx.effect、ctx.computed、ctx.watch etc
}

function HelloHookComp() {
  const ctx = useConcent({ module: 'foo', setup });
  const {
    refComputed, moduleComputed, connectedComputed,
    connectedState, state, settings, dispatch, sync
    // etc ...
  } = ctx;
  // return ui
}