理解的逻辑不一定对，先按照当前理解记录
示例采用加减按钮
- 根据要做的内容定ActionType
// ActionTypes.js
export const INCREMENT = 'increment';
export const DECREMENT = 'decrement';
ActionType 对应const类型的列举
例如按钮点击加减数按钮，对应BUTTION_INC 和 BUTTION_DEC
- 定义Action
import * as ActionTypes from './ActionTypes.js';
export const increment = (counterCaption) => {
return {
type: ActionTypes.INCREMENT,
counterCaption: counterCaption
};
};
export const decrement = (counterCaption) => {
return {
type: ActionTypes.DECREMENT,
counterCaption: counterCaption
};
};
实际是根据ActionType定义对应函数,返回js对象，其中type对应ActionType，
其他属性根据实际情况定义，上例是counterCaption(注意，reducer用到的也是此名)
- 定义reducer
import * as ActionTypes from "./ActionTypes.js";
export default (state, action) => {
// 注意 这里是从action.js带出的js对象的解构
const { counterCaption } = action;
switch (action.type) {
case ActionTypes.INCREMENT:
return { ...state, [counterCaption]: state[counterCaption] + 1 };
case ActionTypes.DECREMENT:
return { ...state, [counterCaption]: state[counterCaption] - 1 };
default:
return state;
}
};
封装了state和action，使用switch分支处理ActionType对应的操作结果并返回state.
此例是加减按钮，点击按钮后会对组件的属性进行对应加减并显示
- 定义store
import {createStore} from 'redux';
import reducer from './Reducer.js';
const initValues = {
'First': 0,
'Second': 10,
'Third': 20
};
const store = createStore(reducer, initValues);
export default store;
定义store并绑定了初始数据和reducer
- 顶层主入口引入Provider和store
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import ControlPanel from "./views/ControlPanel";
import store from "./Store.js";
ReactDOM.render(
<Provider store={store}>
<ControlPanel />
</Provider>,
document.getElementById("root")
);
- 定义组件和子组件
ControlPanel封装Counter和Summary
ControlPanel定义
import React, { Component } from "react";
import Counter from "./Counter.js";
import Summary from "./Summary.js";
const style = {
margin: "20px"
};
class ControlPanel extends Component {
render() {
return (
<div style={style}>
<Counter caption="First" />
<Counter caption="Second" />
<Counter caption="Third" />
<hr />
<Summary />
</div>
);
}
}
export default ControlPanel;
Counter定义
import React from "react";
import PropTypes from "prop-types"
import { connect } from "react-redux";
import * as Actions from "../Actions.js";
const buttonStyle = {
margin: "10px"
};
function Counter({ caption, onIncrement, onDecrement, value }) {
return (
<div>
<button style={buttonStyle} onClick={onIncrement}>
+
</button>
<button style={buttonStyle} onClick={onDecrement}>
-
</button>
<span>
{caption} count: {value}
</span>
</div>
);
}
// 显示声明Counter用到的参数，类型有误则会警告
Counter.propTypes = {
caption: PropTypes.string.isRequired,
onIncrement: PropTypes.func.isRequired,
onDecrement: PropTypes.func.isRequired,
value: PropTypes.number.isRequired
};
// 跟summary一样处理显示
function mapStateToProps(state, ownProps) {
return { value: state[ownProps.caption] };
}
// 定义界面按钮点击操作后的响应，返回js对象包括了
// 加减按钮的响应，实际最终调用的dispatch函数，
// 传入参数是 {
// type: INC或DEC
// counterCaption: caption名
// }
function mapDispatchToProps(dispatch, ownProps) {
return {
onIncrement: () => {
dispatch(Actions.increment(ownProps.caption));
},
onDecrement: () => {
dispatch(Actions.decrement(ownProps.caption));
}
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Counter);
Summary定义
import React, { PropTypes } from "react";
import { connect } from "react-redux";
function Summary({ value }) {
return <div>Total Count: {value}</div>;
}
Summary.PropTypes = {
value: PropTypes.number.isRequired
};
// 这个函数映射处理显示的内容
function mapStateToProps(state) {
let sum = 0;
for (const key in state) {
if (state.hasOwnProperty(key)) {
sum += state[key];
}
}
return { value: sum };
}
export default connect(mapStateToProps)(Summary);
