redux 集中式状态管理 -- 状态的调用

• provider 包在最外面 让整个程序都能访问到 跨组件状态集中管理
• connect 专门访问状态 状态映射 将全局的状态映射为我自己的状态 类似于vuex的map
• reducer 就是状态对象 很函数差不多的状态 改变初始化都需要调用它 可以有多个reducer
• 状态的更新 --》 action 字符串对象都可以 （本节不讲哈）
• 使用流程 推荐在index.js使用
  • 引入redux

  import{createStore} from 'redux'
  

  • 引入provider

  import{Provider} from 'react-redux'
  

  • 创建reducer
    • 是一个函数，有两个参数 state action
    • 初始化和后续修改都会调用这个函数，初始化时没有之前的状态 state是空的

    function reducer1(state={默认初始值}, action) {
        return state
    }
    

  • 创建store

  const store = createStore(reducer1)
  

  • 用provider包裹app传递store对象

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

• redux不是只配react 不是独有
• react-redux用来支持react访问redux
• redux的使用 connect
  • 从react-redux引入connect

  import {connect} from 'react-redux'
  

  • connect是一个函数
  • 参数是一个函数
  • 返回值也是一个函数
  • 返回的函数执行需要给一个组件
  • 执行完毕返回一个connect对象

  let conn_fn = connect(function(){})
  let conn = conn_fn(App)
  export default conn
  

  • 通常简写

  export default connect(function(){
      
  })(Comp1) // 自定义的某某某个组件啦当然是
  

  • state的使用是通过props，对，就是父子组建传递参数的props，最终赋值给props在组建内使用
  • connect的参数是个函数 函数的参数有两个 state 和 props，没错，这个state就是全局的reducer里return的state，依然没错，相信自己的判断，这个props就是组建原本的props，是父组件调用该组件时传递的值。
    ok，那么这个函数是干嘛的呢
    • 解决参数的冲突。解决全局的state和当前组件私有的props之间的冲突，如果state有一个属性name（值为zhangsan），组件也有一个参数是name（值为lisi），这时候，props的name默认会被state里的覆盖（name=zhangsan），所以，这个函数的作用是解决这个冲突

    export default connect(function(state, props){
        return {
            ...state,
            name: props.name
        }
    })(App)
    

    • 返回值将会赋值给props，经过上述的处理，本组件内的props将会变为lisi

    render(
        <div>{this.props.name></div> // 展示效果为lisi
    )
    

    • 如果不做任何处理呢？

    export default connect(function(state, props){
       return state
    })(App)
    

    结果就是

    render(
       <div>{this.props.name></div> // 展示效果为zhangsan
    )
    

就这么多啦
晚安！