React-redux的定义和使用

为了使代码简洁 使用react-redux

安装

yarn add react-redux --save

react-redux的Provider组件

通过Provider 组件将store引入到组件树中 可以简化在组件里初始化状态 修改组件需要派发事件 然后还需要组件订阅更新

• 使用Provider在主入口index.js 引入store 通过props把store作为属性 传给Provider组件

react-redux的connect方法 使组件中的数据以及派发数据的方法全部由props来实现

react-redux 提供了一个connect方法 通过connect改造组件 通过connect改造 组件中的数据以及派发数据的方法 全部通过props来实现

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import { Provider } from 'react-redux'

import store from './store'

import Counter from './components/Counter'


ReactDOM.render(<Provider store={store}>
  <Counter />
</Provider>, document.getElementById('root'))

1. 使用connect导出一个连接后的组件
   • 首先从react-redux导出connect

   import {connect} from 'react-redux'
   

   • 导出的组件是连接后后 connect可以执行两次 connect是一个高阶函数
   • 高阶函数 形如 let connect => (m1,m2)=>(component)=>{}
     • 第一次执行时传入两个回调函数
       • mapStateProps 把store的状态映射成为组件的props
       • mapDispatchToProps 把 dispatch 映射为prop
     • 第二次执行 传入组件名 Counter 使用connect后 对应组件内的使用数据和修改数据的方法也需要调整 方法和数据都要从props上获取

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import Computed from './Computed'
import Todo from './Todo'

import { add, minus} from '../store/action/counter'

import { connect } from 'react-redux'

// 使用 react-redux 需要导出一个连接后的组件

class Counter extends Component {
  render () {
    return (<div className="container">
      <button onClick={() => this.props.add(1)}>+</button>
      <span>{this.props.num}</span>
      <button onClick={() => this.props.minus(1)}>-</button>
      <Computed />
      <Todo />
    </div>)
  }
}

// react-redux 的 connect 方法接收两个参数，let connect = > (m1, m2) => (component) => {}
// 第一次执行传入两个回调函数：
// 1. mapStateToProps 把 store 的状态映射称为组件的 props
// 2. mapDispatchToProps 把 dispatch 映射为 prop

// 第二次执行，传入组件名 Counter

let mapStateToProps = (state) => {
  // mapStateToProps 的参数 state 就是合并后的状态对象
  // 在 mapStateToProps 函数中要返回一个对象，这些对象中是数据都会成为对应组件的 props
  return {
    num: state.counter.num
  }
}

let mapDispatchToProps = (dispatch) => {
  // mapDispatchToProps 的参数是 dispatch 就是派发行为的 store.dispatch 方法
  // mapDispatchToProps 需要返回一个对象，这个对象中

  return {
    add: (amount) => dispatch(add(amount)),
    minus: (amount) => dispatch(minus(amount))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

mapStateToProps 和 mapDispatchToProps有简便的写法

• mapStateToProps 可以写成一个箭头函数 在箭头函数中使用 ...运算符展开某个状态对象
• mapDispatchToProps 可以传入一个actionCreator对象

export default connect (state=>(state =>({...state.counter}),{add,minus})(Counter))