React实战-一个比Redux更轻量级的state管理库（Kea）

末蓝、 2022-06-10 07:48 282阅读 0赞

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 (

<div>

<p>Count: \{counter\}</p>

<button onClick=\{() => increment(1)\}>Increment</button>

<button onClick=\{() => decrement(1)\}>Decrement</button>

</div>

)

\}

export default class CounterSingletonScene extends Component \{

render () \{

return (

<div>

<Counter />

<Counter />

</div>

)

\}

\}

以上连个自增自减组件将会共享state数据。

2.不共享state数据

我们也可能把组件分别使用，而不需要共享数据，Kea一样能简单设置。

@kea(\{

key: (props) => props.id,

path: (key) => \['scenes', 'counterDynamic', 'counter', key\],

// ...

\})

export default class CounterDynamicScene extends Component \{

render () \{

return (

<div>

<Counter id=\{1\} />

<Counter id=\{2\} />

</div>

)

\}

以上demo中两个组件的state相互独立，不会影响。

四：Kea相对Redux简化了什么？

使用Kea,你至少看不见每次改变state后触发的action,state改变后的监听事件，以及Redux的结构代码。

五：后记

Kea是推出不久的库，它基于Redux，更多细节可以看官网，如果你想采用Kea,你需要先了解Redux的使用方法，至于是否采用Kea，就因人而定了，人生其实努力并没那么重要，选择才是最重要的，也许你花费了很多精力去学一个东西，在你还没学会的时候就已经淘汰了，学习它的方法和思路才是精髓，了解、能用就好。

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关 react Redux 用Redux中央仓库实现一个todolist

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaX...

た入场券/ 2024年04月19日 14:37/ 0 赞/ 90 阅读

相关 React redux更新数据的诡异特征==》彻底掌握redux更新state机制的精髓

此文章是跟随我上一篇文章《Redux Toolkit中action派发但state值不更新的原因》写的。本来一切都搞定了，此时我突发奇想：如果让api服务端不发送包含x-

素颜马尾好姑娘i/ 2023年10月16日 13:48/ 0 赞/ 15 阅读

相关 React Hook 实现 redux 状态管理

// HookFunction.tsx import as React from 'react'; import HookShowArea from

超、凢脫俗/ 2023年07月11日 08:45/ 0 赞/ 34 阅读

相关基于 React、Redux、Webpack 和 React-Router 的轻量级前端框架。

基于 [React][] 、 [Redux][] 、 [Webpack][] 和 [React-Router][] 的轻量级前端框架。特性快速上手，没有其它

痛定思痛。/ 2023年07月05日 13:06/ 0 赞/ 19 阅读

相关 React实战-ReactJS+Redux的思考

React实战\-ReactJS+Redux的思考 ReactJs的官方架构是：ReactJs+Flux。然而作为Flux的升级版，ReactJs+Redux越来越流行，已经

妖狐艹你老母/ 2022年07月18日 05:27/ 0 赞/ 195 阅读

相关 React实战-一个比Redux更轻量级的state管理库（Kea）

React实战\-一个比Redux更轻量级的state管理库（Kea） React之所以更加模块化，有很大一部分原因在于它引入了state机制。在组件内部实现了数据的封闭式管

末蓝、/ 2022年06月10日 07:48/ 0 赞/ 283 阅读

相关比Redux更容易上手的状态管理库

前言当项目越发复杂时，我们发现仅仅是提升状态已经无法适应如此复杂的状态管理了，程序状态变得比较难同步，操作，到处是回调，发布，订阅，这意味着我们需要更好的状态管理方

太过爱你忘了你带给我的痛/ 2022年04月03日 09:44/ 0 赞/ 180 阅读

相关 react-redux 中state改变，页面未重新渲染

1.问题? 在redux中，通过reducer来对state的进行更新，但是我在reducer中改变了state的值，但是页面没有重新渲染，并且在控制台输出

红太狼/ 2021年09月19日 13:26/ 0 赞/ 733 阅读

相关 React在组件中监听redux中state状态的改变

解决方式： 1、在组件中引入store 2、在constructor构造器方法中，重写store.subscribe方法（该方法即是监听state状态改变的放过）

小灰灰/ 2021年09月17日 15:36/ 0 赞/ 1017 阅读

相关 react react-redux

react-redux 和redux一样效果,不同实现安装 cnpm install react-redux --save

蔚落/ 2021年07月24日 16:29/ 0 赞/ 480 阅读