@36node/redux-antd
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

Redex-Antd

version downloads

HOC for antd to connect @36node/redux

  • table
  • form

Install

yarn install @36node/redux-antd

createForm

It is quite easy to put antd-form into redux, just use createForm, and done.

Read packages/tpl-cra-redux for more detail.

import React, { PureComponent } from "react";
import createForm from "@36node/redux-antd";

@createForm("example")
class ReduxFormExample extends PureComponent {
  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        ... antd form ...
      </Form>
    );
  }
}

createTable

import React from "react";
import { Table } from "antd";
import { makeApiSelector } from "@36node/redux";
import { createTable } from "@36node/redux-antd";

const PETS_KEY = "pets";
const columns = [
  { title: "name", dataIndex: "name", key: "name" },
  { title: "owner", dataIndex: "owner", key: "owner" },
  {
    title: "tag",
    dataIndex: "tag",
    key: "tag",
    filters: [{ text: "CAT", value: "CAT" }, { text: "DOG", value: "DOG" }],
  },
  { title: "age", dataIndex: "age", key: "age", sorter: true },
];

/**
 * actions and selectors
 */
export const listPets = store.makeListPets(PETS_KEY);
export const selectPets = makeApiSelector(PETS_KEY);

/**
 * Pets table
 */
@createTable(PETS_KEY, { apiAction: listPets, apiSelector: selectPets })
export default class extends React.Component {
  render() {
    return <Table columns={columns} {...this.props.table} />;
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i @36node/redux-antd

Weekly Downloads

32

Version

0.2.1

License

MIT

Unpacked Size

21.4 kB

Total Files

7

Last publish

Collaborators

  • xuna08
  • zzswang
  • hauy
  • 36node-robot