react-redux

该库是react提供的为react操作redux的, 与纯redux还有些出入, 具体可看下面的注释

首先创建容器

// 该文件是count的容器, 该容器也是一个组件, 但是创建的方式需要使用react-redux的connect方法 
// react-redux规定, 组件不能直接操作redux
// 这里通过props与组件连接, 并与store连接
// 在这里不引入store, 下面的state和dispatch也不是本来就有的, 需要在组件挂载时, 在那里将store传递,而且也不用接收
// 这个组件会在根组件挂载, 在那里传递就行, 具体可以去App.js查看

// 引入组件
import Count from '../../components/Count'
// 引入用于连接组件和store的connect
import { connect } from 'react-redux'
// 引入创建action对象的方法, 用于下方操作state
import { creatIncreaseAction, creatDecreaseAction, createIncrementAsyncAction } from '../../redux/countAction'
// connect方法需要传递两个参数, 均为函数, 一个返回状态, 一个返回操作状态的方法

// 第一个参数, 返回store中的状态, 参数为store中的state,该返回值在组件中的props中
function mapStateToProps (state) {
  // 需要返回一个对象
  return { count: state }
}
// 第二个参数, 返回操作store状态的方法, 参数为dispatch, 可以用来通知store去操作状态
function mapDispatchToProps (dispatch) {
  return {
    increase (data) {
      dispatch(creatIncreaseAction(data))
    },
    decrease (data) {
      dispatch(creatDecreaseAction(data))
    },
    increaseAsync (data) {
      dispatch(createIncrementAsyncAction(data))
    }
  }
}
// 暴露一个连接组件和store后的容器
// connect是一个高阶函数, 第一个函数的参数是两个参数, 一个用于将state传给组件, 一个用于将操作传给组件
// 第二个函数参数是组件
export default connect(mapStateToProps, mapDispatchToProps)(Count)

redux和之前写的那样不用变化, 就还依旧是Action, reducer和store, 变化的主要是组件与store的通信方式

挂载组件时不能直接挂载组件了, 需要挂载它的容器, 并且将stroe传给容器

import React, { Component } from 'react'
import CountContainer from './containers/countContainer'
import store from './redux/store'

export default class App extends Component {
  render () {
    return (
      <div>
        <CountContainer store={store} />
      </div>
    )
  }
}

组件

组件中操作状态的方法读取状态都从props中, props的是从容器中传来的

import React, { Component } from 'react'

export default class Count extends Component {
  incerate = () => {
    this.props.increase(1)
  }
  decrease = () => {
    this.props.decrease(1)
  }
  incerateOdd = () => {
    const { count } = this.props
    if (count % 2 === 0) return
    this.props.increase(1)
  }
  incerateAsync = () => {
    this.props.increaseAsync(1)
  }
  render () {
    const { incerate, decrease, incerateOdd, incerateAsync } = this
    const { count } = this.props
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={incerate}>+1</button>
        <button onClick={decrease}>-1</button>
        <button onClick={incerateOdd}>奇数+</button>
        <button onClick={incerateAsync}>异步+</button>
      </div>
    )
  }
}

优化

优化代码(mapDispatchToProps传递对象)并合并容器和组件

具体见注释

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { creatIncreaseAction, creatDecreaseAction, createIncrementAsyncAction } from '../../redux/countAction'

// 将ui组件和容器写在一个组件中, 容器放下面, 不用再引入ui组件, 直接就能拿着用
class Count extends Component {
  incerate = () => {
    this.props.increase(1)
  }
  decrease = () => {
    this.props.decrease(1)
  }
  incerateOdd = () => {
    const { count } = this.props
    if (count % 2 === 0) return
    this.props.increase(1)
  }
  incerateAsync = () => {
    this.props.increaseAsync(1)
  }
  render () {
    const { incerate, decrease, incerateOdd, incerateAsync } = this
    const { count } = this.props
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={incerate}>+1</button>
        <button onClick={decrease}>-1</button>
        <button onClick={incerateOdd}>奇数+</button>
        <button onClick={incerateAsync}>异步+</button>
      </div>
    )
  }
}
const mapStateToProps = state => ({ count: state })
const mapDispatchToProps = {
  // 这里也可以返回一个对象, 就是一个映射关系, key的值是一个函数, 这里不进行调用
  // 因为在action中可以调用, 这里只是将那里定义的函数传递出去
  // 原来返回函数的形式, 是在回调函数中调用action中的函数, 这里只是传递了函数
  increase: creatIncreaseAction,
  decrease: creatDecreaseAction,
  increaseAsync: createIncrementAsyncAction
}
export default connect(mapStateToProps, mapDispatchToProps)(Count)

store传递的优化

借助Provider在index挂载App时就传递, 这样其他组件中就不要引入和传递store了

并且, react-redux不用监听变化并重新render

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
// 引入Provider, 用于给所有容器传递store, 组件里就可以使用了, 不要每次都在组件中传
import { Provider } from 'react-redux'
// 正常渲染, 注意这里是两次, 一次正常, 一次是放在回调里的
ReactDOM.render(
  // 在Provider中传递store, 就会给所有容器传递
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
// 使用react-redux后就不需要监听变化重新渲染了

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

多个state

对之前的练习一直留有疑问, 就是为什么getState就直接拿到了想要的state

而实际情况上状态里面不可能只存一个状态, 当有多个状态时, 就需要多个reducer来初始化和操作状态

需要多个action来同时store, 而reducer需要combineReducer需要在store中进行连接

// 需要引入combineReducers, 每一个reducer初始化一个状态
// 当有多个状态时, 需要多个reducer, 这时候就需要使用combine进行连接成为一个对象
import { createStore, applyMiddleware, combineReducers } from 'redux'
// 引入reducer
import count from './reducers/count'
import person from './reducers/person'
// 引入用于解析异步创建action的函数的中间件
import thunk from 'redux-thunk'

// 连接多个reducer, 生成一个对象返回, key就是store.getstate拿到的
const allReducer = combineReducers({
  count,
  person
})
// 创建store时传递的是最终连接后的reducer
export default createStore(allReducer, applyMiddleware(thunk))

容器中取值

// 多个reducer通过combine连接成的对象, 都在state中存着, 连接时的key就是这里取值是state的key
const mapStateToProps = state => ({ person: state.person, count: state.count })
const mapDispatchToProps = {
  add: addPerson
}
export default connect(mapStateToProps, mapDispatchToProps)(Person)