實戰react技術棧+express先後端博客項目（4）-- 博客首頁代碼的編寫以及redux-saga的組織

時間 2019-11-29

標籤實戰 react 技術 express 後端博客項目首頁代碼編寫以及 redux saga 組織欄目 React 简体版

原文原文鏈接

項目地址：github.com/Nealyang/Re…html

本想等項目作完再連載一波系列博客，隨着開發的進行，也是的確遇到了很多坑，請教了很多人。遂想，何不一邊記錄踩坑，一邊分享收穫呢。分享固然是好的，若是能作到集思廣益，那豈不是更美。咱們的口號是：堅定不會爛尾前端

本博客爲連載代碼博客同步更新博客，隨着項目日後開發可能會遇到前面寫的不合適的地方會再回頭修改。若有不妥~歡迎兄弟們不嗇賜教。謝謝！react

首頁效果圖(目前是假數據)

未登陸

登陸

首頁部分代碼編寫

class Home extends Component {
    constructor(props) {
        super(props);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this)
    }

    render() {
        const {login,register} = this.props;
        localStorage.setItem('userInfo',JSON.stringify(this.props.userInfo));
        return (
            this.props.match.params.tag && (tags.indexOf(this.props.match.params.tag) === -1 || this.props.location.pathname.lastIndexOf('\/') > 0)
                ?
                <Redirect to='/404'/>
                :
                <div className={style.container}>
                    <div className={style.contentContainer}>
                        <div className={`${style.newsContainer} ${anStyle.animated} ${anStyle.fadeInUp}`}>
                            <ArticleList/>
                            <div className={style.paginationContainer}>
                                <Pagination defaultCurrent={6} total={500}/>
                            </div>
                        </div>
                        <div className={`${style.loginContainer} ${anStyle.animated} ${anStyle.fadeInRight}`}>
                            {this.props.userInfo.userId?<Logined history={this.props.history} userInfo={this.props.userInfo}/>:<Login  login={login} register={register}/>}
                        </div>
                    </div>
                </div>
        )
    }
}
複製代碼

由於未來咱們會以標籤來做爲路由，展現不一樣標籤頁下的文章列表，因此當沒有匹配到url沒有匹配到對應標籤的時候，咱們顯示404頁面。git

首頁部分主要包括如下幾項。輪播圖（這裏僅僅用做UI美觀吧），標籤，文章列表，分頁，登陸功能。github

因此對於複雜編碼的部分，咱們單獨抽出組件。而對於Home.js這個文件，也是點擊全部標籤對應的公共頁面。只是文章列表不一樣而已。express

登陸註冊form組件

別的組件都是常規編碼，這裏說下form組件吧redux

class LoginFormCom extends Component {
    constructor(props) {
        super(props);
    }

    handleLogin = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.login(values.userName,values.password)
            }
        });
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Form onSubmit={this.handleLogin} className={style.formStyle}>
                <FormItem>
                    {getFieldDecorator('userName', {
                        rules: [{required: true, message: '請輸入用戶名!'}],
                    })(
                        <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="Username"/>
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{required: true, message: '請輸入密碼!'}],
                    })(
                        <Input prefix={<Icon type="lock" style={{fontSize: 13}}/>} type="password"
                               placeholder="Password"/>
                    )}
                </FormItem>
                <FormItem>
                    <Button className={style.loginButton} type="primary" htmlType="submit">
                        登陸
                    </Button>
                </FormItem>
            </Form>
        )
    }
}

const LoginForm = Form.create()(LoginFormCom);

export default LoginForm
複製代碼

這裏我是將登陸和註冊單獨拿出來寫了兩個組件的。具體寫法能夠參考antd官方文檔。後端

saga部分

這部分說的saga僅僅是一些全局信息的saga，包含錯誤信息提醒、全局的Loading、登陸狀態等。並不是首頁文章列表標籤的saga微信

reducer

const initialState = {
    isFetching: true,
    msg: {
        type: 1,//0失敗 1成功
        content: ''
    },
    userInfo: {}
};

export const actionsTypes = {
    FETCH_START: "FETCH_START",
    FETCH_END: "FETCH_END",
    USER_LOGIN: "USER_LOGIN",
    USER_REGISTER: "USER_REGISTER",
    RESPONSE_USER_INFO: "RESPONSE_USER_INFO",
    SET_MESSAGE: "SET_MESSAGE",
    USER_AUTH:"USER_AUTH"
};

export const actions = {
    get_login: function (username, password) {
        return {
            type: actionsTypes.USER_LOGIN,
            username,
            password
        }
    },
    get_register: function (data) {
        return {
            type: actionsTypes.USER_REGISTER,
            data
        }
    },
    clear_msg: function () {
        return {
            type: actionsTypes.SET_MESSAGE,
            msgType: 1,
            msgContent: ''
        }
    },
    user_auth:function () {
        return{
            type:actionsTypes.USER_AUTH
        }
    }
};

export function reducer(state = initialState, action) {
    switch (action.type) {
        case actionsTypes.FETCH_START:
            return {
                ...state, isFetching: true
            };
        case actionsTypes.FETCH_END:
            return {
                ...state, isFetching: false
            };
        case actionsTypes.SET_MESSAGE:
            return {
                ...state,
                isFetching: false,
                msg: {
                    type: action.msgType,
                    content: action.msgContent
                }
            };
        case actionsTypes.RESPONSE_USER_INFO:
            return {
                ...state, userInfo: action.data
            };
        default:
            return state
    }
}

// const front = combineReducers({
//    // home
// });

export default combineReducers({
    // front,
    globalState: reducer,
    admin
})
複製代碼

說下幾個狀態。session

FETCH_START: "開始進行異步請求",
    FETCH_END: "異步請求結束",
    USER_LOGIN: "用戶登陸",
    USER_REGISTER: "用戶註冊",
    RESPONSE_USER_INFO: "收到登陸信息",
    SET_MESSAGE: "設置全局提醒",
    USER_AUTH:"USER_AUTH"//後面免登錄再說這個
複製代碼

對應中saga的處理

export function* login(username, password) {
    yield put({type: IndexActionTypes.FETCH_START});
    try {
        return yield call(post, '/user/login', {username, password})
    } catch (error) {
        yield put({type:IndexActionTypes.SET_MESSAGE,msgContent:'用戶名或密碼錯誤',msgType:0});
    } finally {
        yield put({type: IndexActionTypes.FETCH_END});
    }
}

export function* register (data) {
    yield put({type:IndexActionTypes.FETCH_START});
    try {
        return yield call(post, '/user/register', data)
    } catch (error) {
        yield put({type:IndexActionTypes.SET_MESSAGE,msgContent:'註冊失敗',msgType:0});
    } finally {
        yield put({type: IndexActionTypes.FETCH_END});
    }
}

export function* loginFlow() {
    while (true) {
        let request = yield take(IndexActionTypes.USER_LOGIN);
        let response = yield call(login, request.username, request.password);
        if(response&&response.code === 0){
            yield put({type:IndexActionTypes.SET_MESSAGE,msgContent:'登陸成功!',msgType:1});
            yield put({type:IndexActionTypes.RESPONSE_USER_INFO,data:response.data})
        }
    }
}

export function* registerFlow () {
    while(true){
        let request = yield take(IndexActionTypes.USER_REGISTER);
        let response = yield call(register, request.data);
        if(response&&response.code === 0){
            yield put({type:IndexActionTypes.SET_MESSAGE,msgContent:'註冊成功!',msgType:1});
            yield put({type:IndexActionTypes.RESPONSE_USER_INFO,data:response.data})
        }

    }
}

export function* user_auth () {
    while(true){
        yield take(IndexActionTypes.USER_AUTH);
        try {
            yield put({type:IndexActionTypes.FETCH_START});
            let response = yield call(get,'/user/userInfo');
            if(response && response.code === 0){
                yield put({type:IndexActionTypes.RESPONSE_USER_INFO,data:response.data})
            }
        }catch (err){
            console.log(err);
        }finally {
            yield put({type: IndexActionTypes.FETCH_END});
        }
    }
}
複製代碼

saga中主要是對用戶登陸和註冊的處理。每個saga處理函數中都須要put一個請求開始和請求結束的action，若是請求錯誤，則須要設置全局狀態提醒。

user_auth是後面免登錄的一個saga處理，後續介紹，這裏你們能夠略過。