react-redux的简单使用

react-redux是redux 的作者封装了一个 react 专用的库，它能够使你的react组件从redux store中读取数据，并且向store分发action更新数据。react-redux和redux在项目中是配合使用的

使用步骤：

1. 安装 react-redux

1: npm install react-redux --save
或
2：yarn add react-redux

2. 在main.js中引入 react-redux 代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store from './storeReactRedux'
//这是我想调用store的组件
import ReactRudexToDoList from './ReactRudexToDoList'
const App = (
  <Provider store={store}>
      <ReactRudexToDoList />
  </Provider>
)
ReactDOM.render(
  App,
  document.getElementById('root')
);

Provider 组件包裹的组件以及所有的子组件都可以拿到store里的数据。
3. 在需要获取store数据的组件写如下代码

import React from 'react'
import {connect} from 'react-redux'
import {changeInputValueAction,addToDoItemAction,deleteToDoItemAction} from './storeReactRedux/actionCreators'
const ReactRudexToDoList = (props) =>{
  const {defaultValue,list,changeInputValue,AddToDoItem,handelDeleteToDoItem} = props
  return (
    <div>
      <div>
        <input value={defaultValue} onChange={changeInputValue}/>
        <button onClick={AddToDoItem}>提交</button>
      </div>
      <ul>
          {
            list.map((item,index)=>{
              return <li key={index} onClick={()=>{handelDeleteToDoItem(index)}}>{item}</li>
            })
          }
          
      </ul>
    </div>
  )
}
// 获取store里的数据
const mapStateToProps = (state) => {
  return {
    defaultValue: state.defaultValue,
    list:state.list
  }
}
// 修改store里的数据
const mapDispatchToProps = (dispatch) => {
  return {
    changeInputValue(e){
      const action = changeInputValueAction(e.target.value)
      dispatch(action)
    },
    AddToDoItem(){
      const action = addToDoItemAction()
      dispatch(action)
    },
    handelDeleteToDoItem(index){
      const action = deleteToDoItemAction(index)
      dispatch(action)
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(ReactRudexToDoList)

以上代码接触到的新东西如下：

• connect():该方法将组件跟redux链接起来，从而可以让你获取到store的数据，它有两个参数，如下：

• mapStateToProps：是一个函数。它的作用就是像它的名字那样，建立一个从（外部的）state对象到组件props对象的映射关系。它接受state作为参数，返回一个对象，这个对象里的属性是改组件里的属性，例如上面的defaultValue，state.defaultValue就是store里面的defaultValue值。所以这这里处理你想要获取store数据参数。
• mapDispatchToProps：是connect函数的第二个参数，用来建立 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。所以这里是处理改变store里数据的操作。

以上的代码，其实是一个todolist的添加删除的功能。添上丑图