在阅读之前，建议先看状态管理1
react-redux 是redux官方推出的，它能够使你的React组件从Redux store 中很方便的读取数据，并且向store中分发actions以此来更新数据。
react-redux 两个重要的成员：
Provider: 它是一个组件，一般包裹在根组件外面，能够使得你的整个app能获取到store中的数据
Connect：这个方法能够是我们的组件和store关联
Connect - 参数说明
有四个参数，两个比较重要：mapStateToProps (state, ownProps) 和 map DispatchToProps (dispatch, ownProps) ; 和两个不常用的mergeProps(stateProps, dispatchProps, ownProps) 和 options
- 参数 mapStateToProps：类型 function； 这个函数允许我们将store中的数据作为props绑定到组件上；例如 mapStateToProps(state, ownProps) state: redux 中的store； ownProps： 自己的props； （用于接收action）
- mapDispatchToProps(stateProps, dispatchProps, ownProps) 类型： function， 将action作为props绑定到我们自己的函数中，参数：dispatch： 就是store.dispatch() ownProps: 自己的props（用于发送action）
实现一个计数器的例子，来熟悉一下react-redux
初始值为10， 每点一次+， 增加1
image.png
我们将通过两个组件来实现，组件A展示+号按钮， 组件B展示数值， 点击组件A的加号 实现组件B的数据+1
脚手架创建react项目
npx create-react-app redux-demo
安装react-redux
yarn add react-redux
利用redux来构建store
- 在src目录下创建 reducer文件夹，在reducer文件夹下添加index.js 文件，构建reducer来响应actions
reducer接收两个参数，第一个参数是state， 第二个参数是action
// 首先定一个state 的初始值
const initState = {
count: 10
};
// reducer 需要接受action 然后进行逻辑处理
// 判断发送过来的action是不是我们需要的
// 如果是我们需要的，就应该return一个新的state
exports.reducer = (state = initState, action) => {
switch(action.type){
case 'add_action':
return {
count:state.count + 1
};
default:
return state;
}
}
- 在src目录下创建store/index.js 文件，通过createStore方法，把reducer传进来
// 首先需要导入一下createStore 这个方法
import { createStore } from 'redux';
import { reducer } from '../reducer'
// 导入reducer的处理函数 ， 构建一个store
// 可以直接将这个store导出
export default createStore(reducer);
上面的两个步骤我们创建了reducer 和 store， 你可能会疑惑action 去哪里了？ 一步步来，我们将把action放到对应的组件中
引入Provider组件
- 在app.js中引入Provider组件
import { Provider } from 'react-redux
- 利用Provider组件将我们整个结构进行包裹，并且传递给store
function App() {
return (
<Provider store={store}>
<div className="App">...</div>
</Provider>
);
}
新建组件
在src文件夹下新建page目录，在page目录下新建ComA 和 ComB 文件夹， ComA组件放加号，ComB组件放数值
ComA 组件
- 在ComA下新建index.js
import React from 'react';
class ComA extends React.Component{
render(){
return(
<button> + </button>
)
}
}
export default ComA;
- 引入connect ， Provider只是维护store，connect 才是将组件和store关联起来的
import {connect} from 'react-redux';
- 在开头我们将来connect的两个比较重要的参数：mapStateToProps (state, ownProps) 和 mapDispatchToProps (dispatch, ownProps) ;
mapStateToProps 是将store中的数据作为props绑定到组件上
mapDispatchToProps 是将action作为props绑定到组件上
这里我们的组件A是+号按钮，是事件发送方，所以不需要第一个参数，只需要实现第二个参数，也就是mapDispatchToProps
下面让我们实现mapDispatchToProps 它是一个函数，有两个参数
第一个参数：dispatch： 就是store.dispatch() ownProps: 自己的props（用于发送action）
/**
* 这个函数要有一个返回值，返回值是一个对象
* @param {*} dispatch
* @returns
*/
const mapDispatchToProps = (dispatch) => {
return {
sendAction:()=>{
// 利用dispatch 发送一个 action
// action对象必须有type属性
dispatch({
type:'add_action'
})
}
}
}
- 将组件和 mapDispatchToProps 用connect绑定，并为按钮添加点击事件， 点击事件就是从mapDispatchToProps return出来的方法
ComA完整代码：
import React from 'react';
// 导入connect
import {connect} from 'react-redux';
class ComA extends React.Component{
handleClick = () => {
console.log(this.props,'ppp')
// 把sendAction传过来了
// 这里我们就发送action
this.props.sendAction();
}
render(){
return(
<button onClick={this.handleClick}> + </button>
)
}
}
/**
* 这个函数要有一个返回值，返回值是一个对象
* @param {*} dispatch
* @returns
*/
const mapDispatchToProps = (dispatch) => {
return {
sendAction:()=>{
// 利用dispatch 发送一个 action
// action对象必须有type属性
dispatch({
type:'add_action'
})
}
}
}
// 组件A是发送方， 所以要实现第二个参数
export default connect(null, mapDispatchToProps)(ComA)
ComB 组件
ComB用于显示数值，它是接受state的，所以只要实现connect中的mapStateToProps ， 它store中的数据作为props绑定到组件上， 这里我们定义 mapStateToProps， 让它直接将state返回， 那么组件B中就能直接使用props中的数值
import React from 'react'
// 导入connect
import { connect } from 'react-redux'
class ComB extends React.Component{
render(){
return (
<div>{this.props.count}</div>
)
}
}
/**
* 接受两个参数
* @param {*} state
*/
const mapStateToProps = (state) => {
return state;
}
export default connect(mapStateToProps)(ComB)
最后将ComA 和 ComB 引入app.js 中
app.js 完整代码
import './App.css';
import store from './store'
// 导入Provider组件，利用这个组件包裹我们的结构，从而能够达到统一维护store的效果
import {Provider} from 'react-redux'
import ComA from './page/ComA'
import ComB from './page/ComB'
// 导入store
function App() {
return (
<Provider store={store}>
<div className="App">
<ComA />
<ComB />
</div>
</Provider>
);
}
export default App;
以上就完成了一个简单的计数器
