實戰react技術棧+express前後端部落格專案（4）-- 部落格首頁程式碼的編寫以及redux-saga的組織

Neal_yang發表於2017-10-09
ReactExpress後端Redux

專案地址：github.com/Nealyang/Re…

本想等專案做完再連載一波系列部落格，隨著開發的進行，也是的確遇到了不少坑，請教了不少人。遂想，何不一邊記錄踩坑，一邊分享收穫呢。分享當然是好的，
如果能做到集思廣益，那豈不是更美。我們的口號是：堅決不會爛尾

本部落格為連載程式碼部落格同步更新部落格，隨著專案往後開發可能會遇到前面寫的不合適的地方會再回頭修改。如有不妥~歡迎兄弟們不嗇賜教。謝謝！

首頁效果圖(目前是假資料)

  • 未登入

  • 登入

首頁部分程式碼編寫

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頁面。

首頁部分主要包括以下幾項。輪播圖（這裡僅僅用作UI美觀吧），標籤，文章列表，分頁，登入功能。

所以對於複雜編碼的部分，我們單獨抽出元件。而對於Home.js這個檔案，也是點選所有標籤對應的公共頁面。只是文章列表不同而已。

登入註冊form元件

別的元件都是常規編碼，這裡說下form元件吧

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
})複製程式碼

說下幾個狀態。

    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處理，後續介紹，這裡大家可以略過。

總結

如上，在登入的時候，我們dispatch一個login的action，saga則會捕捉該action，然後對應處理後，put相應的action給reducer。

具體的操作，大家可以自行github上檢視程式碼

該部分主要是前端操作，所以程式碼部分都是在 /app 資料夾下。

專案實現步驟系列部落格

交流

倘若有哪裡說的不是很明白，或者有什麼需要與我交流，歡迎各位提issue。或者加群聯絡我~

掃碼關注我的個人微信公眾號，直接回復，必有迴應。分享更多原創文章。點選交流學習加我微信、qq群。一起學習，一起進步

歡迎兄弟們加入：

Node.js技術交流群：209530601

React技術棧：398240621

前端技術雜談：604953717 (新建)

相關文章