一、前言
Redux三大原则: 1)单一数据源 2)State是只读的 3)使用纯函数来执行修改及其涉及的Action、Reducer、Store等相关概念本文不再赘述,其相关概念可以查阅Redux中文官方文档。本文主要介绍使用React-Redux完成简易计数器功能。
二、整体架构
Redux分为展示型组件和容器型组件,前者从this.props获取数据渲染界面,该组件的state是只读的;后者通过react-redux自带的connect方法关联对应的展现型组件实现数据(state状态)的管理(基于分发Action实现管理)。Reducer负责根据Action的类型来修改state的值,可以通过redux自带的combineReducers函数合并多个Reducer。
redux自带的createStore函数通过关联合并的Reducer得到store,react-redux自带的Provider组件通过关联store使得Reducer可以访问并修改state值。
三、简易计数器实现
展示型组件显示简易计数器界面,从this.props获取数据并渲染界面。其核心代码如下所示:
import React from 'react';
import { Component } from 'react';
import PropTypes from 'prop-types';
class Counter extends Component {
constructor(props) {
super(props);
}
render() {
//从this.props获取count计数值和counterAdd 方法
const { count, counterAdd } = this.props;
return (
<div>
<button onClick={counterAdd}>计数器加一</button>
<div>
<div>计数器值: {count}</div>
</div>
</div>
)
}
//指定count为number类型,counterAdd为函数类型
static propTypes = {
count: PropTypes.number.isRequired,
counterAdd: PropTypes.func.isRequired,
}
}
export default Counter
指定计数器增加Action,其核心代码如下所示:
const counterAddAction = {
type: 'counter_add'
}
export default counterAddAction
容器型组件负责传递this.props值给对应的展示型组件,其核心代码如下所示:
import React from 'react';
import { connect } from 'react-redux'
import Counter from '../components/Counter'
import CounterAddAction from "../redux/actions/CounterAddAction ";
//建立一个从(外部的)state对象到(展示型组件的)props对象的映射关系
//counter与展示型组件同名
const mapStateToProps = state => {
return {
count: state.counter.count
}
}
//建立展现型组件的参数到store.dispatch方法的映射
//传递this.props方法,执行counterAddAction(计数器增加Action)对应的函数
const mapDispatchToProps = dispatch => {
return {
counterAdd: () => {
dispatch(CounterAddAction )
}
}
}
//connect方法关联展示型组件
const CounterApp= connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
export default CounterApp;
计数器关联的reducer负责响应Action修改state值,其核心代码如下所示:
export default function counterReducer(state = initialState, action) {
switch (action.type) {
case 'counter_add': return Object.assign({}, state, {
count: state.count + 1 //计数器加一
});
default: return state;
}
}
const initialState = {
count: 0, //count初始值
}
合并多个Reducer的核心代码如下所示:
import { combineReducers } from 'redux'
import CounterReducer from './CounterReducer'
const Reducers= combineReducers({
CounterReducer,
})
export default Reducers
最后在index.js中使用Provider组件关联合并的Reducer,其核心代码如下所示:
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import CounterApp from './container/CounterApp'
import Reducers from './redux/Reducers'
// 通过createStore方法生成store
const store = createStore(Reducers)
ReactDOM.render(
<Provider store={store}> //关联store
<CounterApp/>
</Provider>, document.getElementById('root')
);
最后启动项目,结果如下所示:
四、相关依赖
项目所需的依赖包括redux、react-redux、prop-types,使用npm下载相关依赖即可。
npm install redux --save
npm install react-redux --save
npm install prop-types --save