【初次理解mapStateToProps和mapDispatchToProps】

 

就拿和Hello World一样出名的todo-list来理解mapStateToProps和mapDispatchToProps

两名称拆开来看，顾名思义就是把state和dispatch都转成当前组件的props属性，供当前组件或子组件来使用。

1. mapStateToProps

　　可以理解成就是reducer里定义的属性

 

 ，当前组件就可以调用此属性

• mapDispatchToProps： 就是将action和dispatch合成一个值，作为当前组件的props属性，和store.dispatch({type:xxx,text})类似
• 

   

第一次写博客，很多东西都表达不出来，就感觉像，就是这样做的，这样思考的，说的很不好，

具体呈现和源码：

 

 

 

 

 

二： 代码架构如下，因只想理解下【mapStateToProps】和【mapDispatchToProps】，代码只分了3个文件，app.js，reduce.js和action.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;

 

四：

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;
    }
}

 

 

export function addTodoAction(text) {
    return {
        type: 'ADD_TODO',
        text: text
    }
}

export function toggleTodo(id){
    return {
        type: 'TOGGLE_TODO',
        id: id
    }
}