react框架 Dva & Umi

概念

image

// http://localhost:3000/

//models
import IndexPage from './routes/IndexPage';
import Products from './routes/Products';

//Router Component
function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/products" exact component={Products} />
      </Switch>
    </Router>
  );
}

//Router Component dispatch
const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};
connect(({ products }) => ({
  products,
}))(Products);


//models
export default {
    namespace: 'products',
    state: [],
    reducers: {
      'delete'(state, { payload: id }) {
        return state.filter(item => item.id !== id);
      },
    },
  };
  
 
//經過dva實現整個流程
const app = dva({
    initialState: {
      products: [
        { name: 'dva', id: 1 },
        { name: 'antd', id: 2 },
      ],
    },
});

// 2. Plugins
//app.use({});

// 3. Model
app.model(require('./models/products').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

dva最簡結構

umi 和 dva、roadhog 是什麼關係?

image

簡單來講,

roadhog 是基於 webpack 的封裝工具,目的是簡化 webpack 的配置
umi 能夠簡單地理解爲 roadhog + 路由,思路相似 next.js/nuxt.js,輔以一套插件機制,目的是經過框架的方式簡化 React 開發
dva 目前是純粹的數據流,和 umi 以及 roadhog 之間並無相互的依賴關係,能夠分開使用也能夠一塊兒使用,我的以爲 umi + dva 是比較搭的
// 建立應用
const app = dva();

// 註冊 Model
app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add(state) { return state + 1 },
  },
  effects: {
    *addAfter1Second(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'add' });
    },
  },
});

// 註冊視圖
app.router(() => <ConnectedApp />);

// 啓動應用
app.start('#root');

Umi 與 Dva

image

├── app.js //配置dva
├── assets
│   └── yay.jpg
├── global.css
├── layouts
│   ├── __tests__
│   │   └── index.test.js
│   ├── index.css
│   └── index.js
└── pages //頁面即路由
    ├── $post
    │   ├── comments.js
    │   └── index.js
    ├── 404.js
    ├── __tests__
    │   └── index.test.js
    ├── document.ejs
    ├── index.css
    ├── index.js
    ├── products  // /products
    │   ├── index.js //接收products
    │   └── model.js //配置 /products的路由
    └── users
        └── $id$.js

//products/index.js 派發action
const ProductList = ({ onDelete, products }) => {
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
  }, {
    title: 'Actions',
    render: (text, record) => {
      return (
        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  }];
  return (
    <Table
      dataSource={products}
      columns={columns}
      rowKey={record => record.id}
    />
  );
};

//接收initialState與dispatch
export default connect(({ products }) => ({
  products
}),(dispatch) => {
  return {
    onDelete: function handleDelete(id) {
      dispatch({
        type: 'products/delete',
        payload: id,
      });
    }
  }
})(ProductList)

//app.js配置dva
export const dva = {
    config: {
      onError(e) {
        e.preventDefault();
        console.error(e.message);
      },
      initialState: {
        products: [
          { name: 'dva', id: 1 },
          { name: 'antd', id: 2 },
        ],
      }
    },
    plugins: [
      require('dva-logger')(),
    ],
};
相關文章
相關標籤/搜索