何時使用Redux？

我目前正在寫一MERN堆棧應用程序，我似乎處理狀態以及我欣賞使用模塊化概念背後反應。何時使用Redux？

我看到終極版獲得非常流行，但是從我的基本的瞭解，似乎把所有的狀態，並將它們存儲在一個單店。

目前我儲存的一個道具叫isMobile簡單地聲明無論我是在移動狀態還是不行。我目前正在根據需要將其傳遞給每個組件，以進行相應的調整。 Redux有助於解決這種情況嗎？如果沒有，使用React的真正好處是什麼。

2017-02-16 Sequential

它聽起來並不像'isMobile'永遠不會改變，所以它不是你真正需要一個狀態管理器的東西。 –

我第一次頭「MERN」，我喜歡它。 :) – Aaron

@Jordan，好吧，例如，某些平板電腦會根據橫向和縱向顯示不同的視圖。因此，如果我傳遞狀態：所有組件都可以對狀態更改做出反應。 – Sequential

我有時會發現有一個window減速器可以跟蹤屏幕大小，滾動高度以及其他一些組件依賴的其他屬性。我會創建一個動作創建器，將其設置在頂層組件，以便任何調整大小或滾動動作都可以更新redux存儲，這樣，我就不需要在依賴於窗口屬性的每個組件上附加這些處理程序。

注意，這有可能會重性能，明智的，所以使用反跳和/或節流功能，以減少時間的動作是發射了量是必不可少的。

所以無論是對你的應用程序或在您最上面的成分包裝部件，你可以做這樣的事情：

import { throttle, debounce } from 'lodash'; 

... 
... 

constructor(props){ 
    super(props); 
    this.scrollHandler = this.scrollHandler.bind(this); 
    this.resizeHandler = this.resizeHandler.bind(this); 
    this.update = this.update.bind(this); 
} 

scrollHandler() { 
    throttle(this.update, 250)(); 
} 

resizeHandler() { 
    debounce(this.update, 500)(); 
} 

update() { 
    const { updateWindow } = this.props; 
    const { 
     innerHeight, 
     innerWidth, 
     outerHeight, 
     outerWidth, 
     pageYOffset, 
     scrollY 
    } = window; 

    updateWindow({ 
     innerHeight, 
     innerWidth, 
     outerHeight, 
     outerWidth, 
     pageYOffset, 
     scrollY 
    }); 
} 

componentDidMount() { 
    this.update(); 
    window.addEventListener('scroll', this.scrollHandler, false); 
    window.addEventListener('resize', this.resizeHandler, false); 
} 

componentWillUnmount() { 
    window.removeEventListener('scroll', this.scrollHandler, false); 
    window.removeEventListener('resize', this.resizeHandler, false); 
}

和減速器可能是這個樣子：

const DEFAULT_WINDOW = { 
    innerWidth: 0, 
    innerHeight: 0, 
    outerWidth: 0, 
    outerHeight: 0, 
    pageYOffset: 0, 
    scrollY: 0, 
    scrollingUp: false, 
    scrollingDown: false 
}; 

const window = (
    state = DEFAULT_WINDOW, 
    action 
) => { 
    const { data } = action; 
    switch (action.type) { 
     case types.UPDATE_WINDOW: 
      return assign({}, state, data, { 
       scrollingUp: data.pageYOffset < state.pageYOffset, 
       scrollingDown: data.pageYOffset > state.pageYOffset 
      }); 
     default: return state; 
    } 
};

來源

2017-02-16 20:24:01

完美謝謝你的例子和解釋。 – Sequential