【初次理解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
    }
}