Redux和Connect

Redux的作用:

• 独立组件间实现状态通信.
• 管理组件状态.

使用Redux应该遵循一下原则：

• 整个应用共享的state应该存储在store的状态树中，store是唯一的；
• state不能直接修改，只能通过action表达修改的意图，调用dispatch()修改state；
• state的修改规则reducers必须是一个纯函数，不能有副作用。

Redux的数据流

Store作为唯一的state树，管理所有组件的state。组件所有的行为通过Actions来触发，然后Action更新Store中的state,Store根据state的变化同步更新React视图组件。

我们过下整个工作流程：在整个流程中数据都是单向流动的

• 用户（操作View）调用 store 的 dispatch 接收 action 传入 store；store.dispatch(action)
• Store自动调用Reducer，并且传入两个参数(当前State和收到的Action)，Reducer会返回新的State，
  如果有Middleware(中间件)，Store会将当前State和收到的Action传递给Middleware，Middleware会调用Reducer,然后返回新的State；
• State一旦有变化，Store就会调用监听函数，来更新View；

改变内部 state 惟一方法是 dispatch 一个 action: store.dispatch({type: 'ADD_TODO', text: 2})

Redux的结构:

1\store 是一个对象，它有四个主要的方法：

store可以通过createStore()方法创建,
使用createStore:有两个参数，第一个存放reducer , 第二个存放state数据的初始状态.store的主要作用是将action和reducer联系起来并改变state。

传递数据：store.dispatch(action) 将数据传给store
获取redux中的数据:store.getState()
更新数据:store.dispatch({type: ‘ADD_TODO’, text: 2})

//store/index.js

    import { createStore } from 'redux'
    import { browser } from './reducers'
    let store = createStore(browser)

2\action是一个对象：

action是stores数据的唯一来源,action主要是用来描述你的一个对象，就是要描述这个对象是去干什么的；actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

  //actions/index.js
  
    //type 默认字段 表示你要干什么的
    var browserResize = payload => ({type: ""BROWSER_RESIZE", payload});
    export {
    	browserResize,
   }

3\Reducers是一个函数：
Reducers指定了应用状态的变化如何响应 actions 并发送到 store

export default function browser (state = {
    switchState: true,
    eastWidth: 0
}, {type, payload}) {
 switch (action.type) {
  case 'BROWSER_RESIZE':
   return {...state,eastWidth:payload}
   default:
    return state
}

异步数据流
默认情况下，createStore() 所创建的 Redux store 没有使用 middleware，所以只支持 同步数据流。

你可以使用 applyMiddleware() 来增强 createStore()。它可以帮助你用简便的方式来描述异步的 action。

理解rudex的中间件：

• 帮助你用简便的方式来描述异步的 action。
• 只有排在前面的中间件完成任务之后，后面的中间件才能有机会继续处理action。
• 中间件是独立的函数
• 中间件可以组合使用
• 中间件有一个统一的接口

var logger = store => next => action => {
	// console.log('[action]', action)
	// console.log(`[action] type:${action.type} payload:${JSON.stringify(action.payload)}`)
    next(action)
    // console.log('[store]', store.getState())
    // console.log(`[store] ${JSON.stringify(store.getState())}`)
}
var store = createStore(reducers, applyMiddleware(logger))

---

Connect

Provider也是和connect类似的,作用把 store 提供给其子组件

connect作用:

• 获取store.即指定的state & 指定的action”和 React组件 连接起来 ==> 容器组件
• 它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps: store 中的数据作为 props 绑定到组件上。

const mapStateToProps = (state) => {//Redux 的 store就是参数state
  return {
    count: state.count
  }
}

or

export default connect(
    state => ({ browser: state.browser })
)(App);

mapDispatchToProps将 action 作为 props 绑定到组件上

options中有一个选项,设置withRef:true ,这样就可以在父组件的时候,利用,this.refs.xxxx.getWrappedInstance.set({xxx:xx})改变父组件中的值.