React作为一套优秀的前端框架，为我们提供了一套十分优秀的页面构建方法和思想。可是，React还只是一套视图构建框架，在软件设计模块里面还只是MVC的View层，涉及数据模型时需要一些其他框架的辅助。其中，最著名的莫过于Redux了。既然是结合React使用Redux，那么前端大爷假设你已经使用过React框架，对React有一定的了解了，并且大概知道action, reducer, dispatch的关系，否则请先移步其他书籍文档，因为无论如何15分钟内不可能从不会走到学会跑。
-----------------------------------分割线 0 分钟---------------------------------
先解释原理
首先，React组件有state, props没错吧。state是内部的状态，props是父组件传进来的属性，state, props变化了要触发react diff并且调用render方法更新组件，同意吧。好，就是这么简单的react基本原理，告诉我们除了用户交互导致内部state变化外，数据流是从父组件通过props流向子组件导致子组件更新。这就是React的单向数据流：
自顶向下单向数据流！
自顶向下单向数据流！
自顶向下单向数据流！
重要的事情说三遍。
假设我们的app入口是这样的：
ReactDOM.render(
<App />
document.getElementById('root')
);
这个App也是一个React组件，它是我们的项目中居于最顶层的父组件。如果我们有某个组件，他能够提供数据源，而又居于App之上，那么数据就可以源源不断的从它往下流到App以及各级子孙节点上去。所以Redux给我们提供了Provider:
import { Provider } from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
-----------------------------------分割线 5 分钟---------------------------------
Provider接受一个属性store，这就是我们全局的数据store。我们要根据reducer函数来创建它。
import { createStore } from 'redux'
import { combineReducers } from 'redux'
//reducer函数接受两个参数，state和action，state带默认的初始值
function reducer1(state = [], action) {
switch(action.type) {
case 'add':
return [...state, 'apple is very delicious']; // 这里一定要返回一个新的数组，而不能写成state.push('apple is very delicious1');
default :
return state;
}
}
//reducer当然可以定义多个，不同的reducer对应着不同的state对象，上面的reducer1操作一个数组对象，这个reducer2操作一个Number类型state
function reducer2(state = 0, action) {
switch(action.type) {
case 'increase' :
++state;
return state;
default:
return state;
}
}
const reducer = combineReducers({
reducer1,
reducer2
})
var store = createStore(reducer);
store生成了，随时可以通过store.getState()获得当前store的值。初始状态下调用getState()获得的返回值是
{reducer1: [], reducer2: 0}。
看，reducer函数的名字对应着store里面state的名字。
为了帮助初学者学习，可以添加以下语句，监听每一次dispatch操作后store的状态：
store.subscribe(()=>{
console.log(store.getState());
})
-----------------------------------分割线 10 分钟---------------------------------
现在我们有了最高级别的Provider，并定义好了reducers, 传入了store。接下来我们该考虑子组件了。子组件长什么样，要靠父组件给的props决定，可是数据都在最高级别的provider store里面，怎么样把store里面的数据拿出来作为props给子组件呢！！？？
react-redux给我们提供了魔法黑科技:mapStateToProps和mapDispatchToProps。
顾名思义，把state和dispatch从store里面拿出来，作为props传给子组件！
const mapStateToProps = state => {
return {
state1: state.reducer1
}
}
const mapDispatchToProps = dispatch => {
return {
add: () => {
dispatch({
type:'add'
})
}
}
}
class AppView extends Component {
render() {
const list = this.props.state1.map(v=>{
return (<p className="App-intro">{v}</p>)
})
return (
<div className="App">
<p>{list.length}</p>
{
list
}
<button onClick={()=>this.props.add()}>add</button>
</div>
);
}
}
const App = connect(
mapStateToProps,
mapDispatchToProps
)(AppView)
export default App;
看到了吗，经过mapStateToProps和mapDispatchToProps处理后，我们直接在子组件AppView里面使用this.props.state1就可以拿到store里面的数据，直接使用this.props.add就可以dispatch相应的action。store变化后视图的更新是自动的，无需手工干预。
源代码见：https://github.com/myairforce1/simpleReduxDemo
看到这你是不是对在React中使用Redux有点感觉了呢？请原谅本文使用了一个极为简陋的例子。本着老少咸宜，童叟无欺的初衷，我尽量搬上来一个功能少，但是好理解的例子。如果的确帮助到您，请留下您对本文的喜爱。
网友评论