20180911 redux 粗淺使用

redux是一個狀態管理器

redux的三個部分：

• action

• reducer

   用於生成各種state，
   state就是redux的資料載體，可以是陣列，也可以是物件

• store

   // store由createStore生成
   const store = createStore(store);

  • dispatch

     // dispatch需要派發屬性為type的物件，這個物件一般都在action中存著
     store.dispatch({   type:'aciton'
     });

  • subscribe

     // 訂閱store的變化
     let sub = store.subscribe(listener); // subscribe 返回的函式用來登出相應的監聽器
     sub();

  • getState

     // getState 是一個方法,獲取當前的狀態
     store.getState(); // 結合上一個api進行使用
     store.subscribe(() => {
       store.getState(); // 監聽並獲取當前的狀態
     })

react-redux

• Provider （這是一個元件）

  • 元件有一個屬性 store 傳入的就是 上面生成的store

• connect （HOC 這是一個高階元件）

   const ComponentTest = (props) =>  const NewComponent = connect( 
                                 mapStateToProps,
                                 mapDispatchToProps
                                )(ComponentTest)

  • mapStateToProps 這裡需要返回一個物件

    const mapStateToProps = (state, ownerProps) => {   // ownerProps 是 NewComponent 上傳入的屬性
       // reducer上的state
       // 此處的state不是react的state
       // 這塊就是將redux的state對映到元件ComponentTest的props上的過程
       return {     value: state.value
       }
    }

  • mapDispatchToProps 這裡也需要返回一個物件

    const mapDispatchToProps = (dispatch, ownerProps) => {  // ComponentTest 上的事件event 派發某個action
      // 這塊是將redux的派發事件對映到元件ComponentTest 的props上，元件的事件激發了派發事件
      return {    event:() => dispatch({type:'action'})
      }
    }

  • connect()(Component)

    // 當connect中不傳任何引數的時候：// Component 這個元件上props傳入dispatch，也就是說class ComponentTest extends Component{
      render(){    // 這個元件的props上會有有個dispatch的方法
        const dispatch = this.props.dispatch
      }
    }

redux 中介軟體，我表示不懂，也不會用

• applyMiddleware(...[中介軟體])

redux 的一個腦圖

redux.png

作者：Aaron_Alphabet
連結：