React React-redux

学习目标

React-Redux学习（不需用subscribe）mapStateToPropsmapDispatchToPropsconnect

安装： cnpm install react-redux --save

概念：

Provider组件：自动的将store里的state和组件进行关联。MapStatetoProps：这个函数用于将store的state映射到组件的里propsmapdispatchToProps:将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; // 将修改数据的事件或者方法传入到props const onAddClick = this.props.onAddClick; // 等同于vuex的mapMutation mapState return (

) }}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; // 将修改数据的事件或者方法传入到props const onAddClick = this.props.onAddClick; // 等同于vuex的mapMutation mapState return (

) }}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 (

) } 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'))

参考链接

    [记React connect的几种写法(小结)] ​​    [Redux 入门教程（三）：React-Redux 的用法

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。