react入门系列之redux的一些补充connect ， provider

redux的做一些补充

• 安装redux add react-redux
• provider 第一个核心api
  • 在入口src文件夹中的index.js中使用，包裹其他组件
  • 并在provider添加store={store}属性，这样它所包裹的组件就都可以使用store中的数据了
  • 怎么获取store，就要用下面这个 connect api
• 第二个核心api
  • 它能让需要使用store数据的组件和store做连接
  • mapStateToProps ==> 把store中的state数据映射到组件中的props里面
  • mapDispatchToProps ==> 把store中的dispatch方法挂载到props上

/**
 * index.js
*/
import React from 'react'
import ReactDOM from 'react-dom'
import TodoList from './todoList'
import { Provider } from './store'
const App = (
    <provider store={store}>
        <TodoList/>
    </provider>
)
ReactDOM.render(App, documnet.getElementById('root'));
// -----------------分割线------------------------------------------------------------------------------

/**
 * TodoList组件
*/
import React， { Component } from 'react';
import { connect } from 'react-redux'; // 引用react-redux这个对象中的一个属性，要使用解构赋值，用花括号包裹

const TodoList = (props) => {
        const { inputValue, list, handleInputChange, handleClick, handleDelete } = props
        render() {
        return (
            <div>
                <div>
                    <input value={inputValue} onChange= {handleInputChange}/>
                    <button onClick={handleClick}>提交</button>
                </div>
                <ul>
                    {
                        this.porps.list.map((item,index)=>{
                            return <li onClick = {() => { handleDelete(index) }} key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
// mapStateToProps ==> 把store中的state数据映射到组件中的props里面
const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}
// mapStateToProps ==> 把store中的state数据映射到组件中的props里面
const mapDispatchToProps = (dispatch) => {
    return {
        handleInputChange (e) {
            const action ={
                type: 'change_input_value',
                value: e.target.value
            }
            dispatch(action)
            console.log(e.target.value)
        },
        handleClick () {
            const action ={
                type: 'add_todolist_item'
            }
            dispatch(action)
        },
        handleDelete (index) {
            const action = {
                type: 'delete_todolist_item',
                index
            }
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(TodoList)

// -------------------分割线---------------------------------------------------------------------------

/**
 * reducer.js
*/
const defaultState = {
    inputValue: '' ,
    list: []
}
export default (state= defaultState, action) => {
    if( action.type === 'change_input_value') {
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value;
        return newState
    }
    if ( action.type === 'add_todolist_item') {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if ( action.type === 'delete_todolist_item') {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index, 1)
        return newState
    }
    return state
}