两名称拆开来看，顾名思义就是把state和dispatch都转成当前组件的props属性，供当前组件或子组件来使用。
mapStateToProps可以理解成就是reducer里定义的属性
，当前组件就可以调用此属性
mapDispatchToProps： 就是将action和dispatch合成一个值，作为当前组件的props属性，和store.dispatch({type:xxx,text})类似
第一次写博客，很多东西都表达不出来，就感觉像，就是这样做的，这样思考的，说的很不好，
具体呈现和源码：
二： 代码架构如下，因只想理解下【mapStateToProps】和【mapDispatchToProps】，代码只分了3个文件，app.js，reduce.js和action.js，不喜勿喷
三：
代码
App.js文件 import React, {Component} from 'react';import {connect} from 'react-redux';import {bindActionCreators} from "redux";import {addTodoAction, toggleTodo} from "../actions/addTodoAction";class App extends Component { constructor(props) { super(props); this.state = { inputValue: '' } } keyUpHandler(e) { if (e.target.value.trim() !== '' && e.keyCode === 13) { this.props.addTodoAction(e.target.value); this.setState({ inputValue: '' }) } } onChangeHandler(e) { this.setState({ inputValue: e.target.value }); } toggleTodo(id) { this.props.toggleTodoAction(id) } render() { const listData = []; this.props.todo.forEach((value, index) => { listData.push(<li key={index} style={{textDecoration: value.completed ? 'line-through': 'none'}} onClick={this.toggleTodo.bind(this, value.id)} > {value.text} </li>); }) return ( <div> <input value={this.state.inputValue} onChange={this.onChangeHandler.bind(this)} type="text" onKeyUp={this.keyUpHandler.bind(this)}/> <button onClick={this.keyUpHandler.bind(this)}>addToDo</button> <ul> {listData} </ul> </div> ); }}function mapStateToProps(state) { return { todo: state.addTodoReducer }}function mapDispatchToProps(dispatch) { return { addTodoAction: bindActionCreators(addTodoAction, dispatch), toggleTodoAction: bindActionCreators(toggleTodo, dispatch) }}const AppContainer = connect( mapStateToProps, mapDispatchToProps)(App);export default AppContainer;
四：
reducer.js let nextId = 0;const initState = [];export function addTodoReducer(state = initState, action) { switch (action.type) { case 'ADD_TODO': return [ ...state, { id: nextId++, text: action.text, completed: false }] case 'TOGGLE_TODO': return state.map(item => item.id === action.id ? {...item, completed: !item.completed} : item) default: return state; }}
action.js export function addTodoAction(text) { return { type: 'ADD_TODO', text: text }}export function toggleTodo(id){ return { type: 'TOGGLE_TODO', id: id }}
转载于:https://www.cnblogs.com/chengxiaofei2018/p/10071582.html
