Redux

1. 什么是redux

redux是javascript状态容器，由flux发展而来，提供可预测化的状态管理。

2. 什么时候用

​ 小型项目只使用react完全够用，数据管理使用props，state即可。但随着业务复杂度的增加，单纯使用react显得有点捉襟见肘，比如一个组件A嵌套多层组件，当传递到子组件E时，纯靠props传递显得有点不爽，中间BCD组件可能并不需要props数据，但迫于无奈仍需要传递。或者是兄弟组件之间想要共享某些数据，也不是很方便。诸如此类的情况，就有必要引入redux了。

3. 好处

image

3. redux三大原则

• 单一数据源

  整个应用的state被存储在一棵object tree中，并且这个object tree只存在于唯一一个store中。

• State只读

  唯一改变state的方法就是触发action，action是一个用于描述已发生事件的对象。

• 改变数据只能通过纯函数实现

  action改变state，需要reducers，Reducer只是一些纯函数，它接受先前的state和action，并返回新的state。

4. 核心api

• Action

  一般改变store状态数据会通过store.dispatch()将action传到store，Action内部必须使用一个字符串类型type来表示将要执行的动作，多数情况下type会被定义为字符串常量，当应用规模越来越大，可以使用单独的模块或文件存放action。

  import { ADD, UPDATE } from '../actionTypes'
  

• reducer

  reducer是一个纯函数，根据previousState和action计算出新的state，指定应用状态的改变如何响应action并发送到store

  reducer(previousState, action)
  

• store

  Redux的核心，由Redux提供的createStore(reducer, defaultState)方法生成，并生成三个方法，getState(),dispatch(),subscrible()

• 三者之间的关系

  <img src="https://static-zhiozhou.oss-cn-beijing.aliyuncs.com/oss-imgs/redux.png" style="zoom:50%;"/>

React-redux

• connect

  connect连接React和Redux store，返回一个已与Redux store连接的新组件

  import { connect } from 'react-redux'
  import { add } from './store/actions/cart-actions'
  class App extends React.Component{
    constrctor(props) {
      super(props)
      this.state = {}
    }
    ...
  }
  export default connet(add)(App)
  

• Provider

  使用React的context可以实现跨组件之间的传递原理，实现store的全局访问，将store传给每个组件。

  import ReactDOM from 'react-dom'
  import { Provider } from 'react-redux'
  import store from './store'
  import App from './App'
  
  ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.querySelector('app')
  )
  

Redux & React-redux

<img src="https://static-zhiozhou.oss-cn-beijing.aliyuncs.com/oss-imgs/react-redux.png" style="zoom:50%;" />