新闻发布挂历系统中redux详细版

在src文件夹下创建reducers文件夹用于储存各种reducer方法。

例如：在头部的折叠按钮和侧边栏是平级关系，故需要使用redux。

1. 将reducer方法储存在CollaspedReducer纯函数中。
2. 在与reducers文件夹平级中创建store文件，用“redux-react”包中createStore开辟一个存储空间store。
3. 因为redux的单一state所以要用combineReducers合并来自不同文件，用于不同功能的方法。为简化手动store.dispatch和store.subscrib分配和订阅，用content高阶组件包装可以自动获得store中的state。
4. 那么如何获得store中的state呢？就需要用到“redux-react”包中Provider组件。在项目的根组件中用Provider中传递store。

Topheader组件作为发布者，Sidemenu作为订阅者，在Topheader中用content包装

​
export default connect()(withRouter(TopHeader))​

意思为：将connent（）执行完之后返回一个全新的高价函数。

与withRouter不同，(withRouter(TopHeader))直接包装Topheader之后用this.props.history或者this.props.location属性固定。而connent（）（）意思是我们可以选择不同的状态不同的属性来获得值

/*
connect(mapStateToprops//将state转化为propos属性mapDispatchTopropos//把dispath映射为一个props
)()*/

那么我们就声明一个mapStateToprops对象

const mapStateToprops = () => {return {isCollapsed: 1,}
}

并返回侧边栏的state是否折叠。作为参数给高阶组件

export default connect(mapStateToprops)(withRouter(TopHeader))

要获取state状态isCollapsed 并用在reducer方法中用对象解构使之改变需要用点语法

const mapStateToprops = ({ CollApsedReducer: { isCollapsed } }) => {return {isCollapsed: 1,}
}

在changeCollapsed 中取反isCollapsed折叠侧边栏。用mapDispaychToprops内定义改变侧边栏的方法并用type标记。

const mapDispatchTopropos={
changeCollapsed(){return {type:"change_collapsed"}
}
}

在store中用找到存储的reducer，发现只有一个reducer：CollApsedReducer后用swicth，case匹配到type执行取反操作：如果不匹配返回老状态。

折叠侧边栏也是一样的道理，通过在sideMenu组件中用connent包装sideMenu组件定义mapStateToprops函数并在参数中解构出reducer：CollApsedReducer中 iscollapsed 状态，在Sider组件中更改折叠状态。

    <Sider trigger={null} collapsible collapsed={props.iscollapsed}>

例如：在axios接受到数据之前用加载组件，接收得到数据后再隐藏组件。因为从antd中引用的<Spin>不是组件，不方便通信，也需要redux。

用axios拦截器

在reducer文件夹中建立LoadingReducer 函数传入之前的老状态，和action。从action中解构出type，和payload，用swicth，case匹配type后更新状态到pyload中。

export const LoadingReducer = (prevState = { isCollapsed: false }, action) => {let { type, payload } = actionswitch (type) {case 'change_collapsed':let newstate = { ...prevState }newstate.isLoading = payloadreturn newstatedefault:return payload}
}

存到store中

​
export const LoadingReducer = (prevState = { isCollapsed: false }, action) => {let { type, payload } = actionswitch (type) {case 'change_collapsed':let newstate = { ...prevState }newstate.isLoading = payloadreturn newstatedefault:return payload}
}​

redux持久化，将redux存入localStorage，每次刷新后也不会改变侧边栏的折叠状态。