Frontend: React + Redux
Backend: Django + Django REST API

InfoPlus
- Frontend - [React / Redux]
- Table of Contents
- 设计路由
  - 组织Route结构层次
- 组件设计
- [Redux 设计](#redux-设计)
- WiKi
- Updating to New Releases

InfoPlus

Frontend - [React / Redux]

设计路由

路由设计路由设计的过程可以分为两步：
为每一个页面定义有语义的路由名称（path）。
组织Route结构层次。

定义路由名称我们有三个页面，按照页面功能不难定义出如下的路由名称：
- 登录页：/login
- 帖子列表页：/posts
- 帖子详情页：/posts/:id（id代表帖子的ID）。

但是这些还不够，还需要考虑打开应用时的默认页面，也就是根路径”/“对应的页面。结合业务场景，帖子列表页作为应用的默认页面最为合适，因此，帖子列表页对应两个路由名称：”/posts”和”/“。

组织Route结构层次

组件设计

容器组件设计
显示组件设计

Redux 设计

ActionCreator

在Dispatch的时候被执行，其执行结果（action对象）作为dispatch的参数，派发给reducer。

Button onClick

1	<Button onClick={()=>this.props.dispatch(this.props.someActionCreator())}

Input value

Dispatch

有几种方式：

将action creator映射到props，这样在 handle 处理组件的行为是，要派发这个 actionCreator 执行的结果

# Option1:
const mapDispatchToProps = dispatch => { 
    return { 
        someActionCreator: someActionCreator, 
    }; 
};

将 action dispatch 函数绑定到 props，

再做一个 handler 调用这个函数 props。

可以再将这个 handler 传递到显示组件，这样显示组件就可以修改状态达到重新渲染的目的。

# Option2:
# import someActionCreator
const mapDispatchToProps = dispatch => { 
    return { 
        someActionCreator: ()=>{
            dispatch(someActionCreator)
        } 
    }; 
};

使用的时候

将actionCreators 一次绑定到props

这种方法类似方法2，只是可以一次映射多个 ()=>{dispatch(someActionCreator())}

以 actionCreator 的名字作为 props 的名字进行映射
- 映射完以后可以直接以 actionCreator 的名字执行派发 action

const mapDispatchToProps = dispatch => {
  return {
    ...bindActionCreators(postActions, dispatch),
    ...bindActionCreators(uiActions, dispatch)
  };
};

设计状态

设计原则:

像设计数据库以一样设计state
state 看作数据库
state 中每一部分看做一张表
状态中每一个字段对应表中的一个字段

整个状态按操作需要分成若干子状态，子状态之间不能保存重复数据
state 以键值对的结构保存数据，以记录的 Key 或 ID 作为记录索引，记录中的其他字段依赖于索引
state 中不保存可以通过已有字段计算而来的数据，即字段不互相依赖

设计模块

WiKi

一个render()函数里面可以选择返回什么组件或者元素