一个简单邮箱应用的实现：使用react+redux+webpack+css-modules

摘要：这个库也很好理解，主要使用了和两个方法使用就是让所有的组件有取到里保存的的可能性。我被这个疏忽折磨了一个晚上。后面的是个参数，可以用传进去，或者依靠其他的判断一下。然后只要用一个三元运算符就可以解决要不要这个组件显示的问题。

这几天用react+redux+webpack写了一个简单的邮箱，这是我第一次用redux写应用，觉得很有必要记录一下遇到的各种坑~~??

DEMO在这里：
https://yisha0307.github.io/M...
这边是源码：
https://github.com/yisha0307/...
（各位用github的旁友路过请随意帮我点个赞哟！谢谢~）

外观如图：

webpack基础的配置环境可以先看我这篇文章：
https://segmentfault.com/a/11...

然后再来讲讲这次特别的地方。

考虑到最后bundle.js的大小问题，第三方库我都用的cdn, 这次用到的有:
react / redux / react-dom / react-redux / font-awesome，
除了最后一个，其他的四个都要在webpack.config.js里用externals注明一下：

//webpack.config.js
externals: {
    "react":"React",
    "redux":"Redux",
    "react-dom" :"ReactDOM",
    "react-redux":"ReactRedux"
}

然后在写的js/jsx文件里开头引用一下就行：

//类似这样的格式：
import React,{Component} from "react"

font-awesome因为是css，本来就是全局的，所以就不需要externals，直接用就好了~

这个plugin也是为了缩小最后的bundle.js的~
不过因为装了这个plugin之后热加载的速度会变慢，所以建议开发的时候先不要用~
另外还有一些办法可以让bundle.js变小，比如关掉devtool之类的，具体可以看我之前写的一篇笔记：
https://segmentfault.com/n/13...

这次整个的应用我是这么安排的：

node_modules不说了，反正基本不用管；

public里面放的是最后的bundle.js和index.html，和我自己做头像的一张照片嘿嘿~

src里就是主要写的东西啦~因为是用react-redux的provider和connect写的，所以分成了containers和components，components放UI组件，containers放容器组件；

css我用的是sass，这次试了下css-module，也挺容易的，只要在webpack.config.js里面的css-loader后面加上?modules就可以用css-module了，
具体用法：https://segmentfault.com/n/13...

因为没有服务器端，这次的邮件就用inbox.json这个文件模拟；

reducers.js记录这次使用的所有reducer，最后用redux里的combineReducers合并成一个，用createStore引入到里。

先看一眼我这次的reducers:

//import MAILS from "./src/inbox.json";
import {combineReducers} from "redux"
import MAILS from "./src/inbox.json"
//1、mails
//数据库里所有的Mails(包括显示的和没显示的)
//先对MAILS进行处理，每个加上一个id
let id = 0
for(const mail of MAILS){
    mail.id = id++;
}
console.log(MAILS);

const mails = (state = MAILS, action) => {
    switch(action.type){
        case "COMPOSE":
            return [...state, {from: action.from, address: action.address, time:action.time, message: action.message, subject:action.subject, id: id++, tag: action.tag, read:"true"}] 
        case "DELETE_MAIL":
            //根据id把这封邮件找出来，tag改成"deleted"
            return state.map(mail => {
                if(mail.id !== action.id){return mail;}else{
                    return(Object.assign({}, mail, {"tag": "deleted"}));
                }
            })
        case "OPEN_MAIL":
            return state.map(mail => {
                if(mail.id !== action.id){return mail;}else{
                    return(Object.assign({},mail,{"read":"true"}));
                }
            })
        default:
            return state
    }
}

//2、currentSection
//显示在mailist里的mails
const currentSection = (state = "inbox", action) => {
    switch(action.type){
        case "SELECT_TAG":
            return action.tag;
        default:
            return state
    }
}

//3、selected
//显示在maildetail里的那封邮件
const selectedEmailID = (state = null, action) => {
    switch(action.type){
        case "OPEN_MAIL":
            return action.id;
        case "DELETE_MAIL":
            const mails = action.mails
            const selected= mails.find(mail => mail.tag === action.tag && mail.id > action.id);
            if(!selected){return null}
            return selected.id
        case "SELECT_TAG":
            return null
        default:
            return state
    }
}

//4、composeORnot
//如果值为true，maillist和maildetail不出现，只出现composepart
//如果值为false, 反过来
const composeORnot = (state = false,action) => {
    switch(action.type){
        case "TURN_COMPOSE":
            return !state;
        case "SELECT_TAG":
            return false
        default:
            return state
    }
}
//5、新加一个unread
const showUnread = (state = false,action) => {
    switch(action.type){
        case "TURN_UNREAD":
            return action.bool;
        default: 
            return state
    }
}

const inboxApp = combineReducers({mails,currentSection,selectedEmailID,composeORnot,showUnread});
export default inboxApp

这次用的reducers:
1) mails:

COMPOSE: 每写一封邮件在原来的mails后面插入一封；

DELETE: 目标邮件的tag改成"deleted"；

OPEN：目标邮件的"read"改成"true".

2) currentSection:

SELECT_TAG：在右边栏选到哪个tag就render那个tag下的邮件队列；

3）selectedEmailID:

OPEN_MAIL: open的为目标邮件;

DELETE_MAIL: delete的邮件的下一封且同tag的邮件选为目标邮件；

SELECT_TAG：选其他的tag，select的mail就取消，等待用户选择；

4）composeORnot:

TURN_COMPOSE: 就是在页面上点"compose"这个按钮，mailList和mailDetail不出现，出现的是compose邮件的地方；

SELECT_TAG：在右边栏选tag的时候，自动回到mailList和mailDetail;

5) showUnread

其实就是在页面上的"all"和"unread"切换；

reducers其实就是用来记录state的变化，所以写react会用到几个state, 这边就需要几个reducers~ 不过有一点不一样的是，如果是写react应用，思维逻辑是从action => state的变化，但是react+redux就是从state的变化 => action。
举个例子来说，如果我在react里写delete mail这个action，是这样的：

//react w/o redux
deleteEmail(id){
        const emails = this.state.emails;
        const index = emails.findIndex(x=>x.id === id);
        emails[index].tag="deleted";
        selectedEmail = emails.find( x=> x.tag===emails[id].tag && x.id > id);
        this.setState({
            selectedEmail: selectedEmail,
            emails
        })
    }

这个deleteEmail的动作其实影响到了

emails（选中的这封mail的tag变成"deleted")

selectedEmail（自动选同一个tag队列里的下一封邮件)

两个state。但是写的时候，逻辑其实是从actions的角度出发的。

但是如果用redux写，就是从state的角度出发考虑，可以看我上面的reducers里的mails和selectedEmailId两个state里都有DELETE_MAIL这个action。

另外设计states的时候，要尽量减少各个states之间的耦合，因为它们之间在reducers.js里是没法互相引用的；但是如果实在没法完全剥离开也是有办法解决的。比如我上面写的selectedEmailId这个reducer，在DELETE_MAIL这个动作发出之后，要选择下一封邮件作为target，但是不能直接用action.id+1, 因为没法确定在inbox.json文件里，队列里下一个mail的tag是和你删掉的一样的，所以这时候我选择把mails当做参数传进去：

 case "DELETE_MAIL":
            const mails = action.mails //注意这个
            const selected= mails.find(mail => mail.tag === action.tag && mail.id > action.id);
            if(!selected){return null}
            return selected.id

用的时候就直接把mails放在mapStateToProps, 然后再传给dispatch就行~就可以解决两个state互相引用的问题啦~

这次是用react-redux这个库来连接的，当然也可以选择不用react-redux，直接在root组件上把所有的action都dispatch一下，然后一级一级传下去。

react-redux这个库也很好理解，主要使用了Provider和connect两个方法.

使用provider就是让所有的组件有取到redux里保存的state的可能性。只要在root组件外面包一层就可以。需要的属性就是store。

//index.jsx
const store = createStore(inboxApp)
class App extends Component{
    render(){
        return(
        
            
        )
    }
}

connect就是一个比较重要的方法啦，它的意思就是把容器组件和UI组件联系在一起。这样只要写好UI组件，外面用connect()包一层就行啦~
这个应用的UI组件和容器组件是这样的：

前面加大v的就是容器组件，基本都是一一对应的关系，当然有些不需要逻辑层的可以只用UI组件就行，比如MailItem这个~

拿Sidebar举个例子（截取部分）：

//sidebar.jsx
const Sidebar =({currentSection, unreadcount,trashcount,sentcount,handleCategory,turncompose}) => {
    return (
        
            
            
            Compose
......

const mapStateToProps = (state) => {
    return {
        currentSection: state.currentSection,
        unreadcount: countunread(state.mails),
        trashcount: counttrash(state.mails),
        sentcount: countsent(state.mails)
    }
}

const mapDispatchToProps = (dispatch,ownProps) =>{
    return {
        turncompose: () => {
            dispatch({type: "TURN_COMPOSE"})
        },
        handleCategory: (tag) =>{
            dispatch({type: "SELECT_TAG", tag: tag})
        }
    }
}

const VSidebar = connect(mapStateToProps,mapDispatchToProps)(Sidebar)
export default VSidebar

towhom = v} placeholder = "address"/>

let towhom;

const mapDispatchToProps = (dispatch) => {
    return {
        handlecompose: (address,message,subject) => {dispatch({
            type:"COMPOSE",
            from: "Chen Yisha",
            address:address,
            time: timeFormat(new Date()),
            message:message,
            subject: subject,
            tag:"sent",
            read:true
        })},
        deleteemail: (mails,id,tag)=> {dispatch({type: "DELETE_MAIL",mails,id,tag})}
    }
}

//如果只有一个参数：
const ComposePart = (display) => {...}

//如果有两个以上参数（别忘记这个大括号）：
const ComposePart = ({display, handleCompose}) => {...}

// 在vcomposepart.jsx里，需要依靠composeORnot这个reducer判断用户有没有选择"comopse’，如果选择了就显示composepart，没有选择就显示mailList和mailDetail这两个组件。
// vcomposepart.jsx
const mapStateToProps = (state) => {
    return {
        display: state.composeORnot? "block":"none"
    }
}
//composepart.jsx
const ComposePart = ({display, handleCompose}) => {
    let towhom, subject, mailbody
    return(
    

......

.currentSection{
    border-left: 5px solid $green;
    &:after{
            content: "";
            background:linear-gradient(90deg, $light-green, #fff);
            width:30px;
            height:40px;
            display: block;
            position: relative;
            left:-30px;
            top:-40px;    
            z-index:-1;
            }
}

.mailbox{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);//这三行可以让整个应用居中
    height: auto;
    width:auto;
    background-color: #fff;
    box-shadow: 0 0 20px #eee; //注意这行
    border-radius: 5px;
}

.flexb{
    display: flex;
    display: -webkit-flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    height: 500px;
}