iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
0
Modern Web

30天React從入門到入坑系列 第 25

DAY25:flux想解決什麼問題?

  • 分享至 

  • xImage
  •  

flux是一個模式而不是一個框架,所以使用flux並不會有太多新的程式碼,所以我們主要了解這個模式概念是什麼,flux到底想解決什麼問題?

react以撰寫components可重覆利用組合而成新頁面,但所有資料都是包在元件之中,元件只能透過setState來改變state狀態,元件相互溝通時只能靠著props去進行傳遞,如果多個元件互相傳遞或層級傳遞變得極為複雜,更新資料又是層層更新,flux設計模式就是為了解決這樣子的問題。

component只能透過setState改變state,但我們能透過傳遞方法到child元件來改變parent元件的state,這就是我想表達的層層傳遞,層層更新會變得很混雜。

src/Parent.js

import React, { Component } from 'react';
import Child from './Child';

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.handleFn = this.handleFn.bind(this);
    this.state = {parentval: "parent"};
  }

  handleFn(param) {
    this.setState({parentval: param});
  };

  render() {
    return (
      <div>
        <h1>{this.state.parentval}</h1>
        <Child fn={this.handleFn}/>
      </div>
    );
  }
}

export default Parent;
src/Child.js

import React, { Component } from 'react';

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {parentval: "parent"};
  }

  handleClick() {
    this.props.fn('Change-Parent-State');
  }

  render() {
    return <h1 onClick={this.handleClick}>child</h1>;
  }
}

export default Child;

Flux Parts

  • Dispatcher
  • Store
  • Action
  • View

Flux官網示意圖(單向資料流)
https://ithelp.ithome.com.tw/upload/images/20180113/20107317tFQsK22mBq.png

Dispatcher
主要用途接收action(actionType & payload資料),再發送給所有註冊的callback。這在設計模式類似於發佈/訂閱模式(Publish/Subscribe Pattern),而每一個應用程式只會有一個singleton dispatcher,再由這一個dispatcher統一發送。

Store
每個store都在dispatcher上註冊,提供一個callback方法,每當有action產生時相對應的callback會被呼叫使用。

Action
定義內部API,當方法觸發時發送給dispatcher,基本的flux action:

{
  type: 'ADD_TODO',
  payload: {
    text: 'Do something.'  
  }
}

View
從store接收資料將資料(props)傳遞到子元件並render

參考資料
Flux:In Depth Overview
https://facebook.github.io/flux/docs/in-depth-overview.html#content
flux-concepts
https://github.com/facebook/flux/tree/master/examples/flux-concepts
Flux Standard Action
https://github.com/acdlite/flux-standard-action


上一篇
DAY24:React實作小專案(webpack調整)
下一篇
DAY26:用counter來了解redux
系列文
30天React從入門到入坑30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言