我最近才发现Redux。一切看起来都很好。使用Redux比Flux有什么缺点,缺点或妥协吗?谢谢
Both Redux and Flux require a considerable amount of boilerplate code to cover many common patterns, especially those that involve asynchronous data fetching. The Redux documentation already has a handful of examples for boilerplate reduction: http://redux.js.org/docs/recipes/ReducingBoilerplate.html. You could get everything you might need from a Flux library like Alt or Fluxxor, but Redux prefers freedom over features. This could be a downside for some developers because Redux makes certain assumptions about your state that could be inadvertently disregarded.
你真正回答你的问题的唯一方法是尝试Redux,如果你可以的话,也许在一个个人项目中。Redux的出现是因为开发人员需要更好的体验,它倾向于函数式编程。如果你不熟悉函数概念,比如约简器和函数组合,那么你可能会慢下来,但只是稍微慢一点。在数据流中采用这些想法的好处是更容易测试和可预测性。
免责声明:我从Flummox(一种流行的Flux实现)迁移到Redux,优点远大于缺点。我希望我的代码中少一些魔法。减少魔法的代价是更多的样板,但这是一个非常小的代价。
Redux作者在这里!
我想说的是,你将在使用它时做出以下妥协:
You'll need to learn to avoid mutations. Flux is unopinionated about mutating data, but Redux doesn't like mutations and many packages complementary to Redux assume you never mutate the state. You can enforce this with dev-only packages like redux-immutable-state-invariant, use Immutable.js, or trust yourself and your team to write non-mutative code, but it's something you need to be aware of, and this needs to be a conscious decision accepted by your team. You're going to have to carefully pick your packages. While Flux explicitly doesn't try to solve “nearby” problems such as undo/redo, persistence, or forms, Redux has extension points such as middleware and store enhancers, and it has spawned a young but rich ecosystem. This means most packages are new ideas and haven't received the critical mass of usage yet. You might depend on something that will be clearly a bad idea a few months later on, but it's hard to tell just yet. You won't have a nice Flow integration yet. Flux currently lets you do very impressive static type checks which Redux doesn't support yet. We'll get there, but it will take some time.
我认为第一个是初学者的最大障碍,第二个是过度热情的早期采用者的问题,第三个是我个人的烦恼。除此之外,我不认为使用Redux会带来Flux所避免的任何特定缺点,有些人甚至说它与Flux相比有一些优点。
请参阅我关于使用Redux的优点的回答。
相对于其他Flux替代品,使用Redux的最大好处之一是它能够将您的思想重新定位为更实用的方法。一旦你理解了这些线是如何连接起来的,你就会意识到它在设计上令人惊叹的优雅和简单,而且永远不会回头。
Flux和Redux…
Redux is not a pure Flux implementation but definitely inspired by Flux. Biggest difference is that it uses a single store that wraps a state object containing all the state for your application. Instead of creating stores like you'll do in Flux, you'll write reducer functions that will change a single object state. This object represent all the state in your app. In Redux you will get the current action and state, and return a new state. That mean that actions are sequential and state is immutable. That bring me to the most obvious con in Redux (in my opinion).
Redux支持一个不可变的概念。
为什么不变性?
原因如下: 1. 相干存储的状态总是由减速器改变,因此很容易跟踪谁改变了什么。 2. 性能——因为它是不可变的,Redux只需要检查之前的状态!==当前状态,如果是,则呈现。不需要每次循环状态以确定呈现。 3.调试-新的很棒的概念,如时间旅行调试和热重新加载。
更新:如果这还不够说服你,看看Lee Byron关于不可变用户界面的精彩演讲。
Redux需要开发人员通过代码库/库来维护这一思想。您需要确保以不可变的方式选择库和编写代码。
如果您想了解更多关于Flux概念的不同实现(以及最适合您的需求的实现),请查看这个有用的比较。
说了这么多,我必须承认Redux是JS未来发展的方向(至于写这些行)。
我更喜欢使用Redux,因为它使用一个存储,这使得状态管理比Flux更容易,还有Redux DevTools,它是非常有用的工具,让你看到你对你的状态做了什么,有一些有用的数据,它真的内联React开发工具。
此外,Redux在使用其他流行框架(如Angular)时也有了更多的灵活性。 不管怎样,让我们看看Redux是如何介绍自己作为一个框架的。
Redux有三个原理可以很好地介绍Redux,这三个原理也是Redux与Flux的主要区别。
真相来源单一
The state of your whole application is stored in an object tree within a single store. This makes it easy to create universal apps, as the state from your server can be serialized and hydrated into the client with no extra coding effort. A single state tree also makes it easier to debug or inspect an application; it also enables you to persist your app's state in development, for a faster development cycle. Some functionality which has been traditionally difficult to implement - Undo/Redo, for example - can suddenly become trivial to implement, if all of your state is stored in a single tree.
console.log(store.getState())
/* Prints
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
*/
状态为只读
The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.
store.dispatch({
type: 'COMPLETE_TODO',
index: 1
})
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
})
使用纯函数进行更改
To specify how the state tree is transformed by actions, you write pure reducers. Reducers are just pure functions that take the previous state and an action, and return the next state. Remember to return new state objects, instead of mutating the previous state. You can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree. Because reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.
function visibilityFilter(state = 'SHOW_ALL', action) {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
completed: false
}
]
case 'COMPLETE_TODO':
return state.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: true
})
}
return todo
})
default:
return state
}
}
import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)
欲了解更多信息,请访问这里
据我所知,redux的灵感来自于通量。flux是一个类似MVC(模型视图控制器)的架构。facebook在使用MVC时由于可扩展性问题引入了流量。所以通量不是一个实现,它只是一个概念。实际上redux是通量的实现。
推荐文章
- 对象作为React子对象无效。如果要呈现子元素的集合,请使用数组
- Redux @connect装饰器中的“@”(at符号)是什么?
- 如何有条件元素和保持干燥与Facebook React的JSX?
- “你正在运行create-react-app 4.0.3,它落后于最新版本(5.0.0)”
- 道具更新状态在React Form中发生变化
- 在setInterval中使用React状态钩子时状态不更新
- 无法访问React实例(此)内部事件处理程序
- 如何滚动到底部的反应?
- 什么是React受控组件和不受控组件?
- npm犯错!代码UNABLE_TO_GET_ISSUER_CERT_LOCALLY
- 反应-显示加载屏幕,而DOM是渲染?
- 如何解决“不能在模块外使用导入语句”在开玩笑
- 是否有可能在react渲染函数中返回空?
- 使用Redux而不是Flux的缺点是什么
- 反应:为什么当道具改变时子组件不更新