反应，为什么要使用Redux

Question

自从我开发React和Redux的前端以来已经有一段时间了。 Redux仍然是React开发中的重要资产吗？ Redux仅使用React组件状态，道具和生命周期挂钩而不使用Redux这样的全局状态有什么好处？对我来说，全局状态闻起来像是一种反模式，而且不是很实用。

另外，引导React项目（包括用于路由和REST连接的最可靠组件）的最佳方法是什么？

Answer 1

仍然非常相关。问自己：“管理状态是否变得太复杂了，我必须通过不会过多使用状态的组件来传递状态？”如果是这样，请使用redux。没有？不用了。

好处是它简化了代码并处理了传递状态。

Answer 2

Redux仍然有用，但是某些用例已被替换。

用例：缓存HTTP响应

我们现在可以使用ReactJS Context API。对于使用GraphQL的用户，Apollo client does some caching也是如此。

用例：必须通过中间组件传递状态

同样，我们现在更喜欢使用ReactJS Context API。

全球与本地状态

在ReasonML / ReasonReact中，ReactJS的未来reducers are built into components，但在组件级别。默认情况下，没有全局状态。

Redux基本上是Elm architecture的JavaScript实现，它确实使用了全局状态（并且肯定是功能性的）。

可测试性

对我来说，使用Redux的原因是可测试性。

  

由于您编写的大多数Redux代码都是函数，并且其中许多都是纯函数，因此无需模拟即可轻松测试。

source

引导程序

Facebook刚刚发布了create-react-app第2版。

https://github.com/facebook/create-react-app/releases

检查一下！

路由

使用React Router

REST

GraphQL在ReactJS社区中非常流行。 TL; DR是React的核心，是将所有组件标记，样式和行为并置的能力。使用GraphQL，我们还可以并置组件的数据。 Chris Toomey在最近的ReactBoston会议上有一个关于该主题的精彩演讲，该会议将在下周或两周内在YouTube上发布。

如果要使用REST，则可以使用Context API来缓存所有响应。

Answer 3

第一个优点：：使用Redux-您可以从应用程序中的每个组件访问状态。 如果没有Redux，则需要将作为道具的状态从父级链接到子级，问题是链接过多，难以理解代码。 例如：

//Trying to pass the state of FirstComponent as props to ThirdComponent

class FirstComponent extends React.Component {
    state = {
        firstComponentState: 'some value'
    }

    render() {
        return (
            <SecondComponent 
                firstComponentState={firstComponentState}
            />
        )
    }
}


const SecondComponent = (props) => (
        <ThirdComponent 
            firstComponentState={props.firstComponentState}
        />
)

const ThirdComponent = (props) => (
    <div>{props.firstComponentState}</div>
)

如果ThirdComponent需要访问FirstComponent的状态-我们需要将状态从父级链接到子级，直到到达所需的组件。现在，如果我们需要将状态10向下链接，我们的代码将如何？很难理解。 但是使用Redux-我们需要做的就是将ThirdComponent连接到全局redux状态并使用它。

**第二个好处：*兄弟姐妹之间通过状态。 考虑以下代码：

//Trying to pass the state of FirstSibling to SecondSibling

const Parent = () => (
    <div>
        <FirstSibling/>
        <SecondSibling/>
    </div>
)

class FirstSibling extends React.Component {
    state = {
        data: 'pass me to SecondSibling'
    }

    render() {
        return (
            <div>Something..</div>
        )
    }
}

const SecondSibling = () => (
    <div>I need the state of FirstSibling</div>
)

没有Redux，我们如何将FirstSibling组件的状态传递给SecondSibling组件？ 为此，我们需要将状态向上传递-从FirstSibling到Parent，再从Parent，我们需要将状态链接到SecondSibling。 将道具从孩子们绑到父母身上并不是最佳做法。 现在想象一下FirstSibling和SecondSibling有孩子，我们想在它们之间传递状态-代码变得不可读。 但是，再次使用Redux-我们需要做的就是将所需组件连接到全局状态并直接获取数据。