blog - July 09, 2019

nycticorax - 简洁的 React 状态管理

nycticorax 是一个 JavaScript 应用状态管理器,并且默认集成 React 使用

项目地址:https://github.com/fratercula/nycticorax

在 React 上使用非常简单,只需要用 connect 这个 API,没有 Providerreduceraction 等概念

使用

1.创建 store,这个是基本的操作

1
2
import { createStore } from 'nycticorax'
createStore({ name: 0 })

当然也可以忽略这个步骤,不创建 store,这样就不检查数据类型以及是否存在当前 key,非常自由 :)

2.然后需要关联起 view 跟 store 吧,不然咋知道那些需要视图更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { connect } from 'nycticorax'

function A({ dispatch, name }) { // connect 过的组件可以使用 dispatch
  return (
    <div>
      <p>{name}</p> {/* 使用 store 中 name 的值 */}
      <button 
        onClick={() => dispatch({ name: 1 })} {/* 这里 dispatch 改变 store 里的 name 的值为 1 */}
      >
        set
      </button>
    </div>
  )
}

export default connect('name')(A) // 这里是 connect,表示需要使用 store 中的 name 的值

然后就这样可以啦,不需要像 Redux 那样需要 Provider 在最外层包裹容器

问题/对比

以上是最基本用法,当然还支持其他高级功能

异步 dispatch

nycticorax 允许函数 dispatch,并传入相关参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function asyncDispatch({ dispatch, getStore }, ...args) {
  console.log(args)
  return new Promise((resolve) => {
    // get current store
    const { name } = getStore()

    // update name
    dispatch({ name: 'a' })

    setTimeout(() => {
      dispatch({ name: 'b' })

      // resolve
      resolve(name)
    }, 1000)
  })
}
dispatch(asyncDispatch, 'a', 'b').then(() => {
  dispatch({ name: 'c' })
}

不同的实例

直接使用是在同一个实例下的,当然可以新建实例

1
2
import Nycticorax from 'nycticorax'
const { createStore, connect } = new Nycticorax()

性能

跟 Redux 一样,最小化更新,nycticorax 只有在 connect 绑定的 key 值发生变化时候才会更新对应组件,并且对 dispatch 做优化处理

1
2
3
4
5
6
7
8
import { dispatch } from 'nycticorax'

// this
dispatch({ a: 1, b: 2 })
dispatch({ b: 1 })

// will be merged as
dispatch({ a: 1, b: 1 })

对比 Redux

在我看来,Redux 是一种代码设计模式,强调的是函数式编程,而状态管理只是 Redux 附带的一个功能

nycticorax 是纯粹的数据状态共享管理器,其工作模式非常直观简洁 dispatch => store => view。简单说就是共享一些数据状态,然后在适当时候更新数据状态,更新对应的视图

跟踪变化

dispatch 允许传入对象直接修改 store,同时也支持传入 function,这样就可以记录所有变化了,遵循特定的约定,统一来管理,让状态的变化可以预测

Pavane - 基于 Node.js 的 LiveReload Server