When it comes to scaling on the front end, it could mean different things to different people. In most cases, it simply means writing modular code that can be extended easily. The ability to seamlessly handle the addition of more views along with the increase in data and side-effects without worrying about breaking already existing stuff.
当涉及到前端扩展时，对不同的人可能意味着不同的事情。 在大多数情况下，这仅意味着编写可以轻松扩展的模块化代码。 无缝处理增加更多视图的能力以及数据和副作用的增加，而不必担心破坏现有的东西。
An architecture that makes sense.
一种有意义的架构。
React follows the holy grail of one-way data binding to keep things modular and performant. Building presentational components and wrapping them inside containers solves plenty of problems.
React遵循单向数据绑定的圣杯，以保持事物的模块化和高性能。 构建演示组件并将其包装在容器中可以解决许多问题。
Container components are part of a strategy of separating responsibility between high-level and low-level concerns. Containers manage things like subscriptions and state and pass props to components that handle things like rendering UI.
容器组件是将责任分为高级和低级问题的策略的一部分。 容器管理诸如订阅和状态之类的东西，并将道具传递给处理诸如呈现UI之类的组件。
But these containers still have to manage data. And multiple containers might want access to the same data. Lifting state up doesn’t scale well and will cause performance issues since even a small update in the parent state would re-render all the child components.
但是这些容器仍然必须管理数据。 并且多个容器可能希望访问相同的数据。 提升状态不能很好地扩展，并且会导致性能问题，因为即使对父状态进行很小的更新也会重新渲染所有子组件。
Enter Redux.
输入Redux。
Redux provides a JavaScript object, along with a few useful methods called a store which is like a state tree for the application data. The only source of truth of the data.
Redux提供了一个JavaScript对象，以及一些称为存储的有用方法，就像存储应用程序数据的状态树一样。 数据真实性的唯一来源。
Front-end-heavy web applications become more manageable when the UI work is nicely separated from the state-updating work. And Redux does it effortlessly. The only way the state tree can be modified is by dispatching actions on it. Actions also take care of the side-effects making our components more deterministic and hence easily testable.
当UI工作与状态更新工作很好地分离时，前端繁重的Web应用程序变得更易于管理。 Redux毫不费力地做到了。 可以修改状态树的唯一方法是在其上分派动作。 采取措施也要注意副作用，这会使我们的组件更具确定性，因此易于测试。
The redux store is defined by a tree of reducers, with each reducer returning its own piece of the store. Reducers are pure functions that accept the current state and action as arguments and return a new state.
redux存储由一个约简树组成，每个约简 返回自己的商店。 约简器是纯函数，它们接受当前状态和操作作为参数并返回新状态。
Every time an action is dispatched, redux will pass this action through the reducer tree, and modify the state which matches the action type. This makes modification of the state of several reducers with the same action type possible.
每次调度动作时，redux都会将该动作传递给reducer树，并修改与动作类型匹配的状态。 这使得可以以相同的动作类型修改多个减速器的状态。
Middlewares in redux are used to interpret actions and do something before it reaches the reducer.
redux中的中间件用于解释动作，并在到达减速器之前执行某些操作。
The best feature of middleware is that it’s composable in a chain. You can use multiple independent third-party middleware in a single project.
中间件的最大特点是它是可组合的。 您可以在一个项目中使用多个独立的第三方中间件。
Logging, crash reporting, async API calls are some of the functions you can perform with a middleware. Here is an interesting story of how middleware became a thing.
记录，崩溃报告，异步API调用是您可以使用中间件执行的一些功能。 这是一个有趣的故事，说明中间件是如何成为事物的。
How does Redux help?
Redux如何提供帮助？
Redux helps us manage a global state which can be used by different components individually making them more deterministic and testable. It provides a state-update mechanism which manages the global store in a more predictable way ensuring data consistency at any given time. It also provides us with cool features like hot reloading and time travel debugging which saves a lot of developer time.
Redux帮助我们管理一个全局状态，该状态可以由不同组件单独使用，从而使它们更具确定性和可测试性。 它提供了一种状态更新机制，该机制以更可预测的方式管理全局存储，从而确保在任何给定时间的数据一致性。 它还为我们提供了很酷的功能，例如热重装和时间旅行调试，从而节省了很多开发人员时间。
Using Webpack.
使用Webpack。
Webpack is a powerful build tool. It can do many things and can be made into a whole separate series. Some of the features that it provides —
Webpack是一个功能强大的构建工具。 它可以做很多事情，可以做成一个完整的单独系列。 它提供的一些功能-
Separate common modules from bundles.
Dead-code elimination aka Tree Shaking.
死代码消除又名Tree Shaking 。
Performance budgets for highlighting better performance patterns.
绩效预算用于突出更好的绩效模式。
Production mode for built-in optimisations.
内置优化的生产模式。
Separate application code from 3rd party code.
What else?
还有什么？
Building an optimized file structure for the application is essential for easy traversal through the application code. Grouping files by feature might make it less tedious. Using a CSS language extension tool like Sass or Less helps build modular CSS which is maintainable and reusable. Integrating Redux-sagas can manage side-effects more efficiently.
为应用程序构建优化的文件结构对于轻松遍历应用程序代码至关重要。 按功能对文件进行分组可能会减少繁琐的工作。 使用Sass或Less之类CSS语言扩展工具有助于构建可维护和可重用的模块化CSS。 集成Redux-sagas可以更有效地管理副作用。
Further reading.
进一步阅读。
Setting up a large scale React application
Tips on React for large scale projects
10 tips for better Redux Architecture
Keep Webpack Fast: A Field Guide for Better Build Performance
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
