React实战-一个比Redux更轻量级的state管理库（Kea）
React实战-一个比Redux更轻量级的state管理库（Kea）
React之所以更加模块化，有很大一部分原因在于它引入了state机制。在组件内部实现了数据的封闭式管理，但是React只是一个UI库，不是一个完整的前端框架，UI最终也必须呈现数据，这里的数据就不仅仅是内部的数据，也包括外部的数据，也就导致了在开发企业级UI时，并不能完全理想化的认为单个组件数据的独立性，在React开发组里最早推出的是Flux，随后又出现了Redux，在使用这些库的过程中，我们会感觉繁琐，学习曲线陡峭。Flux中event事件满天飞，Redux难以理解，并且也少不了依照其要求构建一些重复、雷同的代码，React本身都是年轻的，基于React的库也在不断更新，总得发展路线是从框架设计合理、结构清晰，向着使用方便、简单的方向不断进步，衍生了不少新的state管理库，最近最新最简单的state库莫过于Kea了（微信公众号：React实战）。
Kea是基于Redux的，Kea是世界上最聪明鹦鹉的名字，可能开发者有这样的希望，Kea能成为Redux衍生家族中最小巧，最聪明的一个吧。
一：Kea的地址
https://kea.js.org/
二：如何引入Kea
npm install kea --save
npm install reselect redux-saga --save
npm install react redux react-redux --save
三：Demo
1.共享state数据
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { kea } from 'kea'
@kea({
actions: () => ({
increment: (amount) => ({ amount }),
decrement: (amount) => ({ amount })
}),
reducers: ({ actions }) => ({
counter: [0, PropTypes.number, {
[actions.increment]: (state, payload) => state + payload.amount,
[actions.decrement]: (state, payload) => state - payload.amount
}]
})
})
export default class Counter extends Component {
render () {
const { counter } = this.props
const { increment, decrement } = this.actions
return (
Count: {counter}
)
}
export default class CounterSingletonScene extends Component {
render () {
return (
)
}
}
以上连个自增自减组件将会共享state数据。
2.不共享state数据
我们也可能把组件分别使用，而不需要共享数据，Kea一样能简单设置。
@kea({
key: (props) => props.id,
path: (key) => ['scenes', 'counterDynamic', 'counter', key],
// ...
})
export default class CounterDynamicScene extends Component {
render () {
return (
)
}
以上demo中两个组件的state相互独立，不会影响。
四：Kea相对Redux简化了什么？
使用Kea,你至少看不见每次改变state后触发的action,state改变后的监听事件，以及Redux的结构代码。
五：后记
Kea是推出不久的库，它基于Redux，更多细节可以看官网，如果你想采用Kea,你需要先了解Redux的使用方法，至于是否采用Kea，就因人而定了，人生其实努力并没那么重要，选择才是最重要的，也许你花费了很多精力去学一个东西，在你还没学会的时候就已经淘汰了，学习它的方法和思路才是精髓，了解、能用就好。