@36node/redux-antd 中文文档教程

Question

Redex-Antd

antd 连接@36node/redux

• table
• form

Install

yarn install @36node/redux-antd

createForm

的 HOC将 antd-form 放入 redux 非常容易，只需使用 createForm，就可以了。

阅读 packages/tpl-cra-redux 了解更多细节。

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} />;
  }
}