写到系列三的时候，感觉有点乏力了。一个人研究，结合众多大神走过的路，还是难免不断地掉坑里，好希望抱个大腿，独行太浪费时间了。不过幸好，写到系列三，难点基本已经结束，剩下难度高点的无非是表结构，以及工作平台如何设计才能公共化。
在开始介绍react-redux之前，很有必要简单论述下redux。redux是一个状态管理器，它负责状态的增删查改，类似mysql一样，可以说，redux跟react框架是没有什么关系的，react-redux是为了更方便使用redux管理项目而创造的一个库。
redux的基本流程：在view中触发dispatch，dispatch将action发送到reducer中后，reducer根据action更新相应的state，进而改变页面view。从基本流程上可以知道，redux重点关注的是--Actions，Reducers，Store，State。
- Action-- 一个行为对象，用于dispatch，告诉reducer需要执行的哪个操作。
- Reducers-- 可以将其看成事件处理中心，由多个事件处理函数组成，当触发某个行为时，从而引发reducer中的对应处理函数，这里也是更新state的地方。
- Store-- 管理state的单一对象，你可以将其看成一个仓库，用来储藏state。核心方法：store.getState()-获取state,store.dispatch(action)-更新state
- State -- 指的是全局状态树，可以理解为数据库，临时储存项目的数据。
react-redux库将组件统一分成两大类：UI组件和容器组件，UI组件是指单纯的渲染页面组件，数据通过this.props获取，不设置state；而容器组件则负责管理数据和业务逻辑，redux的API就是在容器组件中调用。因此，实际上，最外层一般为容器组件，负责数据的获取、更新，里面包裹对应的视觉层组件，渲染页面。
那么，redux是如何与容器组件关联起来的呢？react-redux库提供了一个组件和一个方法。
- connect()方法
// Index为容器组件
export default connect(
mapStateToProps,
mapDispatchToProps
)(Index);
可以看到，connect()方法传入了两个参数mapStateToProps和mapDispatchToProps。这是connect四个属性中比较重要的两个，开发中一般也只用到这两个。
- mapStateToProps：其必定返回一个对象，其作用是将状态绑定到组件的props属性中
function mapStateToProps(state) {
const { websites } = state;
return {
data: websites
}
}
- mapDispatchToProps：返回一个对象。其方法是对store.dispatch(action)的封装。也是在该处进行事件的定义，每个定义在该对象的函数都将被当作 Redux action creator，而且这个对象会与 Redux store 绑定在一起，方法名将作为属性名合并到组件的props属性中，这样组件就可以直接调用该方法。
function mapDispatchToProps(dispatch, ownProps) {
return {
onIncreaseClick: (msg) => dispatch({type: "websites_increase", data: msg}),
onReduceClick: (msg) => dispatch({type: "websites_reduce", data: msg})
}
}
- 同时，在mapDispatchToProps中定义的事件方法，具体的处理函数均在相应的reducer中。
// 如在某个reducer中：
function websiteReducer(state = {count: 0}, action) {
let newState = state;
let count = null;
switch (action.type) {
case 'websites_increase':
count = state.count;
newState ["count"] = count + 1;
return Object.assign({}, state, newState );
case 'websites_reduce':
count = state.count;
newState = action.data;
return Object.assign({}, state, newState );
default:
return Object.assign({}, state);
}
}
export default websiteReducer;
一个reducer就会返回state树中的一部分（如果只有一个reducer，则这个reducer返回的是整个state树，因此，state中的数据结构就是各个子reducer的集合），而在mapStateToProps方法中传入的入参state是整个状态树的。那么，有多个reducer，该如何合并成一个总的reducer呢，又是如何生成整个state状态树呢。Redux提供了两个方法combineReducers和createStore，
// 使用combineReducers进行合并reducer
import { createStore, combineReducers } from 'redux';
import websiteReducer from './websiteReducer';
import siteReducer from './siteReducer';
const appReducer = combineReducers({
websites : websiteReducer,
sites : siteReducer
})
// 使用createStore接收reducer函数和初始化的数据(currentState)，生成store
const store = createStore(appReducer);
值得注意的是：store根据dispatch之后返回的action对象中的 type 属性来执行相关任务，也就是说只要带有相同 type 属性值的reducer都会执行。因此，建议不同的reducer中的type使用当前key作为前缀。
store有了，这意味着state树已经生成并保存在store中，那么该如何将其传递到每一个组件中呢？这是就要用到了react-redux库中的Provider组件。
通过在最外层再包裹一层Provider组件即可
<Provider store={ store }>
<BrowserRouter history={browserHistory} basename="/app">
<div className="body-content">
<div>测试</div>
<Form />
<Switch>
<Route exact path="/" render={() => pathCom()} />
<Route exact path="/index" component={Index} />
<Route path="/userLogin" component={UserLogin} />
</Switch>
</div>
</BrowserRouter>
</Provider>
这样一来，组件内就可以直接引用属性和相应的方法
class Index extends React.Component{
handleReduceClick() {
let data = this.props.data;
data.count = data.count - 1;
this.props.onReduceClick(data);
}
render() {
const { data, onIncreaseClick, onReduceClick } = this.props;
return (
<div className="productBox">
数值：{data.count}
<button onClick={onIncreaseClick} >加法</button>
<button onClick={this.handleReduceClick.bind(this)} >减法</button>
</div>
);
}
};
然而，Redux本身只能处理同步的action，但大多数前端业务逻辑都必须和后端产生一次或多次异步交互，这就需要一个中间件来实现异步了。在这里我使用官方推荐的redux-thunk。
在这里需要稍微修改下reducer.js文件
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
//异步操作
import promiseMiddleware from 'redux-promise';
//记录日志
import { logger, createLogger } from 'redux-logger';
import websiteReducer from './websiteReducer';
import siteReducer from './siteReducer';
import ajaxReducer from './ajaxReducer';
// RootReducer
const appReducer = combineReducers({
websites : websiteReducer,
sites : siteReducer,
ajax : ajaxReducer
// websiteReducer,
// siteReducer
})
const loggerMiddleware = createLogger()
const store = createStore(
appReducer,
applyMiddleware(
thunkMiddleware, // 允许我们 dispatch() 函数
loggerMiddleware // 一个很便捷的 middleware，用来打印 action 日志
)
)
export default store;
由上面代码可以看出，多了一个ajaxReducer.js，在这里，我单独用一个reducer专门来处理ajax请求。并且由于考虑到后期可能需要用到中断请求和进度展示，暂时不考虑使用fetch。
// 具体数据缓存，加载菊花的展示这些细节和优化方面暂不考虑
const initState = {
isFetching: false, // 是否加载中
items: []
};
function ajaxReducer(state = initState, action) {
console.log(state, action, 5566)
switch (action.type) {
case 'AJAX_START':
return Object.assign({}, state, {
isFetching : true
});
case 'AJAX_SUCCESS':
return Object.assign({}, state, {
isFetching : false,
items: action.data
});
case 'AJAX_FAIL':
return Object.assign({}, state, {
isFetching : false,
items: []
});
default:
return Object.assign({}, state);
}
}
export function getData(params) {
return (dispatch, getState) => {
console.log("ajax请求数据")
dispatch({type: "AJAX_START"});
return $.ajax({
url: '/json',
type: "GET",
data: {funcNo: "100000", id: 1},
success: (json) => {
return dispatch({type: "AJAX_SUCCESS", data: json.data});
},
error: (json) => {
alert(json.info);
return dispatch({type: "AJAX_FAIL"});
}
})
}
}
export default ajaxReducer;
这样以来就可以直接在页面调用
// 如在index.jsx上
import { getData } from '../actions/ajaxReducer';
import store from '../actions/reducer'; // 引用store和thunk后，可直接省去mapDispatchToProps，mapStateToProps
componentWillMount() {
store.dispatch(getData()).then(() => {
// 成功获取数据后，可对数据进行state处理，更新到当前的reducer里面的state
console.log(store.getState(), "成功的回调")
})
}
结语： 本来下一步是介绍express的，但其配置相对简单，数据库又是采用连接池链接的，逻辑是使用bluebird将所有的模块Promise化。至于页面也没啥好说的，在我的构思中，页面组件化是一个趋势，未来的页面犹如拼图一样，直接拼接而成，当然这前提就需要我们开发出庞大的组件库。(好吧，没人点赞，实在没动力写下去了😒)
