何时使用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