– 关注前端和node js,分享福利和心得!

react-redux中间件的使用

react-redux主要是用来简化redux流程的

  • 安装
    npm i react-redux -S
  • 使用Provider提供器,绑定store仓库
    import React from "react"
    import ReactDOM from "react-dom"
    import App  from "./App"
    import {Provider} from "react-redux"
    import store from "./store
    

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

**Provider一般放在入口文件里,被Provider组件包裹的其他所有组件都可以使用store仓库中的数据了**

-   在组件中使用store仓库中的数据

**1、引入连接器connect()**

import {connect} from "react-redux"

**2、使用连接器包装导出方法**

export default connect(null,null)(TodoList)

**3、stateToProps将原来state中的数据映射为props中的数据**

const stateToProps=state=>{ return { inputValue:state.inputValue, list:state.list } }

原本是使用state中的list(this.state.list),映射之后,就可以直接使用store中的数据了(this.props.list)

**4、dispachToProps 方法的映射**

const dispatchToProps=dispatch=>{ return { inputChange(e){ console.log(e.target.value) } } }

**5、将stateToProps,dispatchToProps传入connect连接器**

export default connect(stateToProps,dispatchToProps)(TodoList)


**6、派发action到store中**

const dispatchToProps=dispatch=>{ return { inputChange(e){ const action={ type:'change_input', value:e.target.value } dispatch(action) } } }

``` 重点说一下connect,它其实是一高阶组件,所谓高阶组件就是你给它传入一个组件,它会返回新的加工后的组件,它有四个参数([mapStateToProps],[mapDispatchToProps],[mergeProps],[options])

最新文章

    热门文章