react对redux进行了简单封装 react-redux
当我们要用react-redux时、我们可以安装
npm i react-redux
里面提供了Provider
同时也要安装redux
我们可以引入import {Provider} from "react-redux"
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
或者在app.js使用
在组件中使用时、可以通过react-redux中的connect
进行关联redux中的数据
这里先写一个connect.js(先看看、在下面案例中会使用)
import { connect } from 'react-redux'
const mapState = (state) => { //用来得到redux中的数据
return {
count: state.count
}
}
const mapDispatch = (dispatch) => { //这里的mapDispatch可以自己起名
return {
'incre': (data) => { //这里可以理解为、组件使用connect后、先进来这里的函数再派发给reducer
dispatch({type:’increment‘}))
},
'decre': () => {
dispatch({type:'decrement'})
}
}
}
export default connect(mapState, mapDispatch); //这里是暴露给组件使用方法
接下来在一个计数器的案例演示redux使用
在store.js中
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store;
在reducer.js中
const countState = {
count: 1
}
const reducer = (state = countState, action) => {
switch (action.type) { //这里type必须与派发的type名字相同
case 'increment':
return {
count: state.count + 1
}
break;
case 'decrement':
return {
count: state.count - 1
}
break;
default:
return state;
}
}
export default reducer;
在Button组件中
import React, { Component } from 'react'
import connect from './connect';
class Button extends Component {
handleClick = () => {
console.log(this.props.type)
if (this.props.type === "increment") {
this.props.incre(); //判断传来的type调用connect中的对应方法
} else {
this.props.decre();
}
}
render() {
return (
<button onClick={this.handleClick}>{this.props.children}</button>
)
}
componentDidMount() {
console.log('button', this.props)
}
}
export default connect(Button);
Count组件中
import React, { Component } from 'react'
import Button from "./Button"
import connect from "./connect"
class Count extends Component {
render() {
return (
<div>
<Button type="decrement">-</Button> //通过type传到Button组件
{this.props.count}
<Button type="increment">+</Button>
</div>
)
}
componentDidMount(){
console.log(this.props)
}
}
export default connect(Count)
在这里总结下上面计数器的流程
- 创建store
- 创建reducer.js来更新数据
- 通过connect把组件和redux创建联系
- 通过点击Count中的按钮、传给Button组件type、再根据type执行对应的connect方法
- 在connect方法中、执行对应的reducer方法、修改对应的数据
- 想要使用redux中数据、通过connect中的mapState获取数据
至此完成一个简单的计数器使用redux案例
在redux中还会有异步数据、将在接下来博客中讲到