react-redux入门案例
1、创建actions
export default function addAction() {
return {
type: "add_action"
}
}
也可以直接写成一个对象,但是写成函数的形式更加灵活,比如
export default function todos(text) {
return {
type: "add_action",
text
}
}
2、创建reducer
let initState = {
value: 0
}
export default function reducer(state = initState, action) {
switch (action.type) {
case "add_action":
return {
value: state.value + 1
}
default:
return state;
}
}
reducer函数是对共享数据处理的主要函数,包含两个参数,
state:需要组件之间共享的变量,最好设定初始值,如果没有初始值,可能会出现undefined错误
action:需要对数据进行的某种操作,action中包含的type字段用于区分是那种操作,当然字段也可自己定义。
3、创建store并使用
创建
export default createStore(reducer)
使用
function App() {
return (
<Provider store={store}>
<div className="App">
<Home />
<Button></Button>
</div>
</Provider>
);
}
将需要内部数据共享的组件使用Provider标签包括,并传入store属性
4、修改共享数据
需要共性数据的变量需要使用connect()
函数处理
const mapDispatchToProps = dispatch => {
return {
add: () => {
dispatch(addAction())
}
}
}
export default connect(null, mapDispatchToProps)(Button)
mapDispatchToProps()
函数返回的是一个对象,这个对象中存放的是对state进行操作的函数,这些函数最后都会映射到Button组件中的props属性中,组件中直接使用this.props.asdd()
函数对共享数据进行操作。
组件内部的使用
class Button extends Component {
constructor(props) {
super(props)
this.setState = {}
}
// 好像必须写成箭头函数,否则出现调用this.props说undefined
handleClick = () => {
console.log("props:", this.props)
this.props.add()
}
render() {
return (
<button onClick={this.handleClick}>增加</button>
)
}
}
好像必须写成箭头函数,否则出现调用
this.props
说undefined
5、读取共享数据
class Home extends Component {
constructor(props) {
super(props)
}
render() {
return(
// 注意调用的时候使用的是props
<h1>{this.props.value}</h1>
)
}
}
const mapStateToProps = state => {
return {
value: state.value
}
}
export default connect(mapStateToProps)(Home)
使用connect函数对已有组件进行封装,可以读取state中的共享变量(store中的state),mapStateToProps()
函数返回时值是一个对象,这个对象会将直接结构后放在props属性中,所以直接使用this.props
就可以获取