基于React，dva腳手架的知乎日報

MyZhihuApp

1,初始化

npm install dva
npm install dva-cli -g
mkdir MyZhiHuAppDva
dva -init
npm start
           

浏覽器打開localhost:8989 你就可以看到歡迎界面了

2,修改頁面

• 打開/routes/IndexPage.less,改為：

.normal {
  margin: px;
  text-align: center;
}

.list {
  margin-top: px;
}
           

• 打開/routes/IndexPage.js改為：

檢視浏覽器就可以看到知乎日報了

3,設計模型

• 在models目錄下面建立一個zhihuList.jsx 添加如下代碼

import {query } from '../services/zhihuList'
export default {

    namespace: 'zhihuList',

    state: {
        date:'',
        stories:[]
    },

    subscriptions: {
        setup({ dispatch, history }) {
        },
    },

    effects: {
        *fetchRemote({ payload }, { call, put }) {
        },
        *querry({ payload },{call, put}) {
           const queryObj = yield call(query, {});
            console.log('query ');
            console.log(queryObj);
            yield put({
                type: 'querySuccess',
                payload: {
                    data : queryObj.data,
                }
            });
        },
    },

    reducers: {
        fetch(state, action) {
            return { ...state, ...action.payload };
        },
        querySuccess(state, action) {
            console.log('querrySuccess')
            console.log(state);
            console.log(action);
            const newState = {...state, date:action.payload.data.date, stories:action.payload.data.stories};
            console.log(newState)
            return newState;
        }
    },

}
           

• 激活model ，在index.js裡面第三條添加

app.model(require('./models/zhihuList'));
           

4, 元件設計

• 元件設計非常簡單，是固定模式的，主演完成兩個任務
  • 一個是綁定模型
  • 一個是傳遞資料給無狀态元件
• 代碼如下

import { Link } from 'dva/router';
import styles from './IndexPage.less';
import Main from '../components/Main'

function IndexPage(props) {
  return (
      <div className={styles.normal}>
          <h1>知乎日報</h1>
          <hr />
          <Main {...props} />
      </div>
  );
}

IndexPage.propTypes = {
};
function mapStateToProps({ zhihuList }) {
    return { zhihuList };
}

export default connect(mapStateToProps)(IndexPage);
           

5, 無狀态元件設計

• 無狀态元件就是顯示資料和發送請求

import React from 'react';
import {Button } from 'antd';
import  Introduction from './Introduction'
const Main = (props) => {

  return (
    <div>
        <Button type="ghost" onClick={() =>(console.log('hi'), props.dispatch({type:'zhihuList/querry'}))}>get</Button>
        {props.zhihuList.stories.map((val, i) => (console.log(val), <Introduction key={i} introduction = {val}/>))}
       <Introduction />
    </div>
  );
};

Main.propTypes = {
};

export default Main;
           

• 其中Introduct為具體内容展示

/**
 * Created by kyle on 16-10-24.
 */
import  React from  'react';
import {Card } from 'antd';
import { Router, Route, IndexRoute, Link } from 'dva/router';
import Title from './Title';
import {convertImageUrl } from '../utils/utils';
class  Introduction extends  React.Component {
    render( ){
        let title, img;
        try{
            title = this.props.introduction.title;
            img = this.props.introduction.images[];
        }catch (e){
            title=" ";
            img = " ";
        }

        return (
          <div>
              <Card


              >
                  <Title title={title}/>
                      <img src={convertImageUrl(img)}/>
          </Card>
          </div>
        );
    }
}
export  default  Introduction;