redux使用（一）

Redux的基本使用&&API介紹

1. Reducer
   1. Redux中負責響應action並修改數據的角色就是reducer
   2. reducer的本質其實是一個函數，其函數簽名爲：reducer(previousState，action) => newStatereducer(previousState，action) => newState
   3. reducer 只是一個模式匹配的東西，真正處理數據的函數，通常是額外在別的地方寫的（固然直接寫在reducer中也沒問題，只是不利於後期維護）
   4. 不要直接修改傳入的參數previousState，最好返回一個新的對象state
2. action
   1. 表明用戶操做
   2. 規定必定有一個屬性type,type屬性必定是惟一的
   3. 若是全部的action都手寫可能很麻煩，咱們定義一個action Creaters

      function addTo(num) {
          return {
              type: 'Increment',
              num
          }
      }
      export default addTo;

3. store
   1. Store 就是保存數據的地方，你能夠把它當作一個容器。整個應用只能有一個 Store。
   2. Redux 提供createStore這個函數，用來生成 Store。

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

   3. createStore的3個參數：
      • 參數1：reducer，
      • 參數2：preloadedState，state的初始值，通常由服務器給出，若是給了這個值，默認會覆蓋reducer裏的初始值
      • 參數3：enhancer，會對createStore進行加強後，再傳入reducer和preloadedState，至關於一個高階函數，返回結果：enhancer(createStore)(reducer, preloadedState)
4. state
   1. store對象包含全部的數據，若是咱們想得到當前這個時間點的數據，可使用store.getState();
5. dispatch
   1. 用戶發出action修改state的惟一方法就是dispatch
   2. Store.dispatch(action);調用以後，會去執行reducer規則
6. subscribe
   1. 對state進行監聽，一旦發生變化就會執行這個函數listener

      import { createStore } from 'redux';
      const store = createStore(reducer);
       
      store.subscribe(listener);

   2. 解除監聽，經過subscribe返回的函數，執行以後能夠接觸監聽

      let unsubscribe = store.subscribe(() =>
        console.log(store.getState())
      );
       
      unsubscribe();

       

connect&&Provier的使用

1. 爲何要使用？
   • 使用redux咱們要實現視圖的更新，須要先Store.getState()獲取數據，使用Store.dispatch()更新數據，再使用Store.subscribe()去訂閱這個更新，若是不少地方都這樣作一遍，實在是不堪其重
   • 換個思路，把store直接集成到React應用的頂層props裏面，只要各個子組件能訪問到頂層props就好了，Provider正是這樣一個經過context設置store的組件，而後在經過connect容器組件把「指定的state & 指定的action」和 React組件關聯起來

1. Provider：將store傳給組件

   import { Provider } from 'react-redux'
   import store from './store'
   
   ReactDOM.render(
   <Provider store={store}>
       <App />
   </Provider>
   , document.getElementById('root'));

2. connect：將組件與redux關聯起來的高階函數

   export default connect(
     mapStateToProps,
     mapDispatchToProps
   )(App);

3. mapStateToProps()：創建一個外部state到內部props的一個映射
   1. 是一個函數，接收state做爲參數，返回一個對象，每個key表明一個內部的屬性

      const mapStateToProps = (state) => {
        return {
          todos: getVisibleTodos(state.todos, state.visibilityFilter)
        }
      }
      //getVisibleTodos是一個自定義計算state的函數

   2. mapStateToProps會訂閱 Store，每當state更新的時候，就會自動執行，從新計算 UI 組件的參數，從而觸發 UI 組件的從新渲染。
   3. 能夠接收第二個參數，表明容器組件的props值

      const mapStateToProps = (state, ownProps) => {
        return {
          active: ownProps.filter === state.visibilityFilter
        }
      }

   4. 使用ownProps做爲參數後，若是容器組件的參數發生變化，也會引起 UI 組件從新渲染。
   5. connect方法能夠省略mapStateToProps參數，那樣的話，UI 組件就不會訂閱Store，就是說 Store 的更新不會引發 UI 組件的更新。
4. mapDispatchToProps():創建 UI 組件的參數到store.dispatch方法的映射
   1. 若是mapDispatchToProps是一個函數，會獲得dispatch和ownProps（容器組件的props對象）兩個參數。

      const mapDispatchToProps = (
        dispatch,
        ownProps
      ) => {
        return {
          onClick: () => {
            dispatch({
              type: 'SET_VISIBILITY_FILTER',
              filter: ownProps.filter
            });
          }
        };
      }

   2. 也能夠是一個對象
5. 兩個函數都是將屬性映射到props上面，因此經過this.props.onClick這樣去取值