学习目标

• React-Redux学习（不需用subscribe）
• mapStateToProps
• mapDispatchToProps
• connect

• Provider组件：自动的将store里的state和组件进行关联。
• MapStatetoProps：这个函数用于将store的state映射到组件的里props
• mapdispatchToProps:将store中的dispatch映射到组件的props里，实现了方法的共享。
• Connect方法：将组件和数据（方法）进行连接\

mapStateToProps（state, ownProps）

• state: store的state

• 订阅store的状态变化，每次store发生改变时，mapStateToProps都会被调用。

• ownProps（可选）

  • ownProps代表组件本身的props，如果写了第二个参数ownProps，那么当prop发生变化的时候，mapStateToProps也会被调用。例如，当 props接收到来自父组件一个小小的改动，那么你所使用的 ownProps 参数，mapStateToProps 都会被重新计算）。

  • 如果不传，组件不会监听store的变化，也就是说Store的更新不会引起UI的更新

mapDispatchToProps

• mapDispatchToProps用于建立组件跟store.dispatch的映射关系

• 可以是一个object，也可以传入函数

• 如果mapDispatchToProps是一个函数，它可以传入dispatch,ownProps, 定义UI组件如何发出action，实际上就是要调用dispatch这个方法

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

• mapStateToProps(state, ownProps) : stateProps

  • 将store中的数据作为props绑定到组件上。

• mapDispatchToProps(dispatch, ownProps): dispatchProps

  • 将action作为props绑定到组件上。

• [mergeProps(stateProps, dispatchProps, ownProps): props]

  • mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。

  • 通常情况可以不传这个参数， connect就会使用 Object.assign 替代该方法。

• options

  • 定制connector行为。

  • 很少用到，可略过。

mapStateToProps是必选，如果为空，可以写成：

connect(null,mapDispatchToProps)(Topic)、connect(() => {return {}},mapDispatchToProps)(Topic)

实例一 React-Redux使用

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect, dispatch} from 'react-redux'
class Counter extends React.Component {render() {// 计数，通过store的state传给props，直接通过props就可以将state的数据获取const value = this.props.value;// 将修改数据的事件或者方法传入到propsconst onAddClick = this.props.onAddClick;// 等同于vuex的mapMutation mapStatereturn  (
计数数量：{value}
数字+1)}
}
const addAction = {type: 'add'
}
function reducer(state={num:0}, action) {switch(action.type) {case "add":state.num++;break;default:break;}return {...state};
}
const store = createStore(reducer);
//第一步：将state映射到props中
function mapStateToProps(state) {return {value: state.num}
}
//第二步：将修改state数据的方法，映射到props，默认会传入store里的dispatch方法
function mapDispatchToProps(dispatch) {return {onAddClick:()=>{dispatch(addAction)}}
}
// 将上面的2个方法，将数据仓库的state和修改state的方法映射到组件上，形成新的组件
const App = connect(mapStateToProps, // 第一步mapDispatchToProps // 第二步
)(Counter)
ReactDOM.render(,document.querySelector('#root')
)

实例二 通过ActionFnObj实现多个函数

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect, dispatch} from 'react-redux'
class Counter extends React.Component {render() {// 计数，通过store的state传给props，直接通过props就可以将state的数据获取const value = this.props.value;// 将修改数据的事件或者方法传入到propsconst onAddClick = this.props.onAddClick;// 等同于vuex的mapMutation mapStatereturn  (
计数数量：{value}
数字+1数字+5)}
}
const addAction = {type: 'add'
}
let ActionFnObj = {add: function (state,action) {state.num++;return state},addNum: function (state, action) {state.num = state.num + action.num;return state}
}
function reducer(state={num:0}, action) {if (action.type.indexOf('redux') == -1) {state = ActionFnObj[action.type](state, action)return {...state};} else {return state;}
}
const store = createStore(reducer);
//第一步：将state映射到props中
function mapStateToProps(state) {  // state作为形参是固定的return {value: state.num}
}
//第二步：将修改state数据的方法，映射到props，默认会传入store里的dispatch方法
function mapDispatchToProps(dispatch) { // dispatch作为形参是固定的return {onAddClick:()=>{dispatch(addAction)},onAddClick5:()=>{dispatch({type:"addNum", num:5})}}
}
// 将上面的2个方法，将数据仓库的state和修改state的方法映射到组件上，形成新的组件
const App = connect(mapStateToProps, // 第一步mapDispatchToProps // 第二步
)(Counter)
ReactDOM.render(,document.querySelector('#root')
)

实例三 react-redux 使用前后代码比较

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';const reducer = function(state = {num:1}, action) {if (action.type === 'handle_Decrement_Event') {const newState = JSON.parse(JSON.stringify(state));newState.num--;return newState;} else if (action.type === 'handle_Add_Event') {state.num++;return state;}return state;
}const store = createStore(reducer);class CounterCom extends React.Component {constructor(props) {super(props);this.handleDecrementClick = this.handleDecrementClick.bind(this);}render() {let state = store.getState();return (-{state.num} this.handleAddClick()}>+)}handleDecrementClick() {const action = {type: "handle_Decrement_Event"}store.dispatch(action);}handleAddClick() {const action = {type: "handle_Add_Event"}store.dispatch(action);}
}ReactDOM.render(,document.querySelector('#root')
)store.subscribe(() => {ReactDOM.render(,document.querySelector('#root'))
})

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect} from 'react-redux'class CounterCom extends React.Component {render() {const {num, onDecrementClick, onAddClick} = this.props;return (-{num}+)}
}const onDecrementClick = {type: 'handle_Decrement_Event'};
const onAddClick = {type: 'handle_Add_Event'};const reducer = function(state = {num:1}, action) {if (action.type === 'handle_Decrement_Event') {const newState = JSON.parse(JSON.stringify(state));newState.num--;return newState;} else if (action.type === 'handle_Add_Event') {const newState = JSON.parse(JSON.stringify(state));newState.num++;return newState;}return state;
}const store = createStore(reducer);function mapStateToProps(state) {return {num: state.num}
}function mapDispatchToProps(dispatch) {return {onAddClick: () => dispatch(onAddClick),onDecrementClick: () => dispatch(onDecrementClick)}
}const App = connect(mapStateToProps,mapDispatchToProps
)(CounterCom)ReactDOM.render(,document.querySelector('#root')
)

参考链接

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！