react-redux的使用

1、安装

npm install --save react-redux

2、引入

import store from './store/store'
import {Provider} from 'react-redux'
const App=(
	<Provider store={store}>    //Provider和store联结，Provider里面的所有组件都有获取store的能力
    	<TodoList />
	</Provider>
)

ReactDOM.render(App, document.getElementById('root'));

3、组件中

import {connect} from 'react-redux'
//定义mapStateToProps
const mapStateToProps= (state) => {//固定接收state参数,把store里面的数据转化为组件里面的props
    return{
        inputValue: state.inputValue
    }
}
const mapDispatchToProps= (dispatch) => {//将store的dispatch方法挂在到props上
return{
    handleChange(e){
        console.log(e.target.value)
        const action={
            type:'changeInpuValue',
            value:e.target.value
        }
        dispatch(action)
    },
    handleClick(){

    }

  }
}
// export default TodoList
export default connect(mapStateToProps,mapDispatchToProps)(TodoList)

在jsx中用的时候，是this.props.inputValue、this.props.handleChange。因为store里面的数据转化成了组件里的props数据，也将store的dispatch方法挂在到props上

注意：const { inputValue,list,handleChange} = this.props
这样可简化代码，下面的jsx中用的时候直接inputValue，不用this.props.inputValue
方法中有多个参数的时候移动版要用剪头函数，例如

 <li onClick={() => {delItems(index)}} key={index}>{item}</li>