1.redux的组成

   state:【数据】
        1.DomainDate:  服务器端数据
        2.  UI State:  UI决定展示的状态
        3. App State:  App级别的state状态
    
    
    action:【事件】
        1.把数据从应用到store的载体,store数据的唯一来源
        2.通过store.dispatch()将action传递给store
        3.必须要有type属性
        4.只是描述有事情发生,并没有描述如何去更新state
  
        function addAction(params){
            return {
                type:'add',
                ...params
            }     
        }
        
    reduce:【纯函数】
        1.响应发过来的action,处理之后把state发送给store
        2.需要有返回值
        3.第一个参数是state,第二个参数是action
        
        const rootReducer = ()=>{}
        
     
    store:【把action与reducer关联】
        1.维持应用的state
        2.提供getState()获取state
        3.提供dispatch()发送action
        4.通过subscribe()注册监听
        5.通过subscribe()返回值注销监听
        
        createStore构建store势力对象
        
        import { createStore } from 'redux'
        const store = createStore(传递的reducer)
        

2.React-Redux

    能够使你的React组件从Redux Store中很方便的读取数据,并且向store中分发actions以此来更新数据
   
    Provider     这个组件能够使你整个app都能够获取到store中的数据
    connect      组件与store进行关联  
    
    Provider组件:
        1.Provider包裹在根组件最外层,是所有的组件都可以拿到state
        2.接受store作为props,通过context传递,这样任何组件可以通过context获取到store
        
    connect方法:
        1.包裹组件,使用connect加强
        2.方便获取store中的state
        

3.redux示例

    构建action:
        // 定义action的构建函数
        const sendAction = () => {
        // 返回一个action对象
          return {
            type: 'send_type',
            value:'我是一个action'
          }
        }
        // 导出action
        module.exports = {
          sendAction
        }
        
    
    创建reducer:
        // 构建reducer，处理发送的action
        // 接受两个参数,state/传递的action

        const initState = {
          value: '默认值',
        }

        const rootReducer = (state = initState, action) => {
          switch (action.type) {
            case 'send_type':
              // 将state与action组合成一个新的对象
              return Object.assign({}, state, action)
            default:
              return state
          }
        }
        // 导出reducer函数
        module.exports = { rootReducer }


    实例化store:
        import { createStore } from 'redux'
        import { rootReducer } from '../reducer/index'
        const store = createStore(rootReducer)
        export default store
        
    
    组件中使用:
        const handleClick = () => {
            // 调用action
            const action = sendAction()
            // 发送一个action
            store.dispatch(action)
        }
        

4.react-redux示例

Provider:
     // app.js中导入Provider组件
     import { Provider } from 'react-redux'
     
     // 使用provider包裹app
     function App (){
         return (
             <Provider store={store} >
             ...
             
             </Provider>  
         )
     }
     
 
connect:
    // 导入connect
    import { connect } from 'react-redux'
    
    // 调用connect
    connect(...)(Component)
    
    connect(mapStateToProps,mapDispatchToProps)实现两个参数
    
    mapStateToProps()：组件接收数据
    mapDispatchToProps(dispatch)：组件发送数据
    
    
    const mapDispatchToProps = (dispatch)=>{
        return {
            sendAction: () => {
                // 利用dispatch发送action
                dispatch({
                    type:'add'        
                })   
            }
        }
    }
    
    this.props.sendAction()  发送action到reducer
    
    
    
    const mapStateToProps = (state)=>{
        console.log(state)
        return state
    }