react-8-react-redux

react-redux

需要配合redux一起使用

• 安装reac-redux

npm install react-redux

• react-redux是专门为react项目封装的redux处理库，简化redux在组件中的应用代码
  • Provider 组件

  把store挂载到祖先元素的上下文中，方便后期后台组件的调用

  import {Provider} from 'react-redux'
  
  ReactDOM.render(
    <Provider store={store}>
      <组件 />
    </Provider>,
    document.getElementById('root)
  )
  

  = connect高阶函数

  把redux容器中存储的状态以及需要派发的行为任务都通过属性传递给当前组件
  自动会向事件池中追加当前组件重新渲染的方法，保证状态更新，组件会重新渲染

  // 展示信息
  import React from 'react
  import {connect} from 'react-redux'  
  
  class Test extends React.Component{
    reder() {
      // state的值已经传递给props了
      let {title} = this.props
    }
  }
  
  //重点
  // connect执行需要传递两个函数
  //  mapStateToProps: 把redux容器中的公共状态当作属性传递给当前的组件
  //  mapDispatchToProps: 把需要派发的行为方式通过属性传递给当前的组件
  function mapStateToProps(state){
    //=> state: redux容器中的所有公共状态
    //=> return的值就是当作属性传递给当前组件的状态信息
    return {
      ...state.user // user小状态信息
    }；
  }
  
  export default connect(mapStateToProps)(Test)
  
  // 简写
  export default connect(state => state.user)(Test)
  
  
  // 派发行为
  import React from 'react
  import action from './store/action/index'
  import {connect} from 'react-redux'
  
  class Test extends React.Component{
    render() {
      // state的值已经传递给props了
      let {support} = this.props
  
      return (
        <button onClick={support.bind(null, 1)}>按钮</button>
      )
    }
  }
  
  // 复杂写
  function mapDispatchToProps(dispatch){
    return{
      support(item){
        dispatch(action.user.support(item))
      }
    }
  }
  
  export default connect(null, mapDispatchToProps)(Test)
  
  // 简写
  export default connect(null, action.user)(Test)
  

redux中间件 / redux-thunk / redux-promise

redux-logger

在控制台输出每一次派发的任务的情况

npm insatll redux-logger

• 在创建store的index页面使用

import {createStore, applyMiddleware} from 'redux'
import reducer from './reducers/index'
import reduxLogger from 'redux-logger'

//管控 action creators中的异步处理 (用一个就行了，功能一样)
import reduxThunk from 'redux-thunk'
import reduxPromise from 'redux-promise'

//applyMiddleware: 应用中间件
const stort = createStore(reducer,applyMiddleware(reduxLogger,reduxThunk,reduxPromise))
export default stort;

redux-thunk的使用

import * as TYPES from '../action-type'
constt useraction = {
  // 同步
  support('参数'){
    return {
      type: TYPES.USER_SUPPORT,
      payload: '参数'
    }
  }

  // 异步
  oppose('参数'){
    return dispath => {
      setTimeout(_=>{
        dispath({
          type: TYPES.USER_OPPOSE,
          payload: '参数'
        })
      })
    }
  }
}
export default useraction;

redux-promis

import * as TYPES from '../action-type'
constt useraction = {
  // 同步
  support('参数'){
    return {
      type: TYPES.USER_SUPPORT,
      payload: '参数'
    }
  }

  // 异步
  // redux-promise: 传递给reducer的action对象中的参数必须叫做payload,叫别的值都无法传递
  oppose('参数'){
    return {
      type: TYPES.USER_OPPOSE,
      payload: new Promise((resolve) => {
        setTimeout(_=>{
          resolve('参数')
        },1000)
      })
    }
  }
}
export default useraction;