Package Exports

region-core

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (region-core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

region-core

A replacement tool of redux to handle sync & async action flow. Extremely simple API!

English | 中文

Package	Version	Docs	Description
region-core			The core of Region: set, load & connect
region-shortcut			Wrapped core with global Provider, set, load & connect
region-form			RegionForm extends Region: bindWith any ant-design form item

Get Started

install

npm i region-shortcut
// or
npm i region-core

Create your Component

import { useProps } from 'region-shortcut';
import { fetchUser } from './fetch'; // somewhere with axios

load('user', fetchUser);

const Display = () => {
  const { user } = useProps('user');
  return <div>{user}</div>;
}

export default Display;

import { connect } from 'region-shortcut';
import { fetchUser, fetchFollower } from './fetch'; // somewhere with axios

load('user', fetchUser);
const handleClick = () => load('follower', fetchFollower);

const Display = () => {
  const { loading, error, user, follower } = useProps(['user', 'follower']);
  return (
    <div>
      {user}
      {follower}
      <Button loading={loading} onClick={handleClick} />
    </div>
  );
}

export default Display;

use region with redux

If you are using your own store, see provide

We recommend to use useProps, but the old connect way is also provided. Click to see more.

Create your Component

import { connect } from 'region-shortcut';

const Display = ({ user }) => <div>{user}</div>

export default connect('user')(Display);

import { connect } from 'region-shortcut';

const Display = ({ loading, error, user, follower }) => (
  <div>
    {user}
    {follower}
    <Button loading={loading} onClick={handleClick} />
  </div>
);

export default connect(['user', 'follower'])(Display);

Docs

Document And Best Practices

Migrate Guide

ChangeLog

Request for Comments

Example

Online Example

git clone https://github.com/regionjs/region-core.git
cd example
npm i
npm start

Contribute

Region is Extremely easy to extend, fire a issue if you have some great idea.

import { Region } from 'region-core';

class MyRegion extends Region {
  constructor(...args) {
    super(...args);
    this.someFunc = this.someFunc.bind(this); // in case you are not using class field
  }

  someFunc() {}
}

As for pull request, make sure to add test for your code.