Question

我正在编写一个MERN堆栈应用程序，我似乎正在处理状态，因为我很欣赏使用React背后的模块化概念。

我见过Redux非常受欢迎，但从我的基本理解来看，似乎需要将所有状态存储在一个商店中。

目前我正在存储名为isMobile的道具，只是声明我是否处于移动状态。我正在根据需要将其传递给每个组件以进行相应调整。 Redux有助于解决这种情况吗？如果没有，使用React时有什么好处。

Answer 1

Redux常见问题解答在http://redux.js.org/docs/faq/General.html#general-when-to-use处回答了这个具体问题：

一般情况下，当你有合理数量的数据随时间变化时使用Redux，你需要一个单一的事实来源，并且你发现将所有内容保持在顶级React组件状态的方法已不再适用。

我最近还合着了一篇讨论the benefits of using Redux in a React application的文章。总结是，将应用程序的状态保持在组件树之外可以使数据流更简单，尤其是在您描述的情况下。

Answer 2

我确实发现有一个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;
    }
};

Answer 3

在React中使用Redux时，你会注意到有两种状态：全局，它们是不可变的，通过动作改变，而本地状态是按照常规方式处理的。
在React中学习Redux的一个好方法是通过Dan Abramow的Redux入门：

https://egghead.io/courses/getting-started-with-redux

您会注意到教程中的React代码没有生命周期钩子，每个组件只呈现html。所有州都是全球性的，并通过行动改变。

但是，在使用Redux的更大应用程序中，通常会有本地和全局状态，并且它们必须相互交互。这会增加应用程序的复杂性。

请看 https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

什么时候使用Redux？

3 个答案: