React-redux的使用

1. 安装

npm install react-redux -S

2. 使用

• redux-建立目录结构

  参照redux的使用方法，建立reducers, actions和store

• 使用Provider传递store

  在index.js中使用<Provider>最外层组件包住，并传递store

  import React from 'react'
  import { render } from 'react-dom'
  import { Provider } from 'react-redux'
  
  import App from './App'
  import store from './store'
  
  render(
    <Provider store = {store}>
      <App />
  </Provider>,
    document.querySelector('#root')
  )
  

• 使用Connect接收store

  补充：connect可以使用装饰器@connect(mapStateToProps, mapDispatchToProp)的方式来写

  在组件中使用connect接收<Provider>传递的store，并使用mapStateToProps等将其转换为组件的Props

  connect有4个参数，最常用的是前两个：

  第一个参数是mapStateToProps，作用就是从store里把state注入到当前组件的props中

  第二个参数可以是mapDispatchToProp，作用是将action生成的方法注入当前组件，但是一般不这么用，而是直接将actionCreators的对象传递到props

  import { connect } from 'react-redux'
  
  // 引入actionCreators，这样不需要mapDispatchToProps将dispatch转换为Props
  import { increment, decrement } from '../../actions/cart'
  
  // mapStateToProps可以将store的state转换成component的Props
  const mapStateToProps = (state) => {
    return {
      cartList: state.cart
    }
  }
  
  //----------------------------------------------------------------------
  /*
   * 没有通过actionCreators的情况使用此方法
   */
  // // mapDispatchToProps可以将store的dispatch转换成component的Props
  // // 但是如果使用了action来定义了不同的action并将其暴露出来，可以不使用此方法
  // const mapDispatchToProps = (dispatch) => {
  //   console.log(dispatch)
  //   return{
  //     add: (id) => dispatch(increment(id)),
  //     reduce: (id) =>dispatch(decrement(id))
  //   }
  // }
  // export default connect(mapStateToProps, mapDispatchToProps)(CartList)
  //----------------------------------------------------------------------
  /*
   *使用了action管理action的话，可以直接将action作为对象来传递
   */
  // connect是一个高阶组件
  export default connect(mapStateToProps, { increment, decrement })(CartList)
  

  通过上述处理，components的props中就有了store中的指定state（比如上述就有了state.cart）和dispatch（{ increment, decrement }）了。

  然后就可以直接使用props来进行渲染和修改了。

  eg:

      render() {
          console.log(this.props);
          return (
            <table>
              <thead>
                <tr>
                  <th>id</th>
                  <th>商品名称</th>
                  <th>价格</th>
                  <th>数量</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                {
                  this.props.cartList.map(item => {
                    return (
                      <tr key={item.id}>
                        <td>{item.id}</td>
                        <td>{item.title}</td>
                        <td>{item.price}</td>
                        <td>
                          <button onClick={
                            () => {
                              this.props.decrement(item.id)
                            }
                          }>-</button>
                          <span>{item.amount}</span>
                          <button onClick={
                            () => {
                              this.props.increment(item.id)
                            }
                          }>+</button>
                        </td>
                      <td></td>
                      </tr>
                    )
                  })
                }
              </tbody>
            </table>
          )
        }

3. 对异步action的处理

• 同步action的处理

  actionCreator => 自动 dispatch(actionCreator()) => reducer => store => view
  

• 异步action存在的问题

  对于异步action，异步是在action内部的，但是redux拿到action后会直接进行dispatch，就导致出错。

• middleware

  针对上述问题，redux提出了middleware，使用一个中间件对异步action进行处理，生成新的action，在进行手动dispatch：

  actionCreator => middleware处理生成新的action => 手动 dispatch(actionCreator()) => reducer => store => view
  

  middleware是redux提供的是位于action被发起之后，到达reducer之前的扩展点。

• 异 步action的处理

  middleware是redux提供的中间件的统称，现在的实现方法又很多种，最常用的是redux-thunk

  • 安装redux-thunk

    npm install redux-thunk -S
    

  • 使用redux-thunk

    1. 在store创建的时候引入applyMiddleware和thunk

       import { createStore, applyMiddleware } from 'redux'
       import thunk from 'redux-thunk'
       
       import rootReducer from './reducers'
       
       export default createStore(
           rootReducer,
           applyMiddleware(thunk)
           )
       

    2. 在actionCreator里return一个方法，并在里面手动进行dispatch

       **eg:**对比同步action和异步action

       //同步action
       export const decrement = (id) => {
         return {
           type: actionType.CART_AMOUNT_DECREMENT,
           payload: {
             id
           }
         }
       }
       
       // 异步action，使用redux-thunk之后，就可以在actionCreator里return一个方法，这个方法的参数是dispatch
       export const decrementAsync = (id) => {
         return (dispatch) => {
           setTimeout(() => {
             dispatch(decrement(id))
           }, 2000)
         }
       }