Gyron.js 文档

快速使用

在开始使用之前我们需要了解redux状态库相关知识，我们的redux完全基于redux，如果你还不清楚redux相关知识，那就需要前往https://redux.js.org/进行学习。

Redux是redux的Gyron.js状态库，在不破坏 immutable 的同时，让其数据更改变得可响应。在内部使用了一个响应式变量作为 state 的副本，只需要在修改时同步 state 到这个响应式变量上。这个响应式变量无法在外部进行修改，只能通过 dispatch 修改，这样保证了数据的稳定性。

创建 Store

可以使用createStore创建一个 store plugin，然后将其导出

store.js

import { createStore } from '@gyron/redux'

export default createStore({
  reducer: {},
})

在组件中使用 State

创建完一个 store 之后就可以根据实际场景在 reducer 中添加全局状态(State)。

createStore({
  reducer: (state = { value: 0 }) => {
    return state
  },
})

接着就可以在应用中任何地方使用这个 State。

import { useSelector, FC } from '@gyron/redux'

const App = FC(() => {
  const state = useSelector()
  return <div>{state.value}</div>
})

创建一个模块

在简单的数据场景中上面已经可以满足了，但是在开发的时候会遇到一些比较复杂的场景，比如自定义中间件、根据页面分离 state，我们可以使用createSlice方法创建一个 state 片段。

counter.js

import { createSlice } from '@gyron/redux'

const counter = createSlice({
  name: 'counter',
  initialState: {
    count: 0,
  },
  reducers: {
    increment(state) {
      state.count++
    },
  },
})

export const { increment } = counter.actions

export const counter = counter.reducer

此时可以这样应用上述这个模块。

import { counter } from './counter'

createStore({
  reducer: {
    counter,
  },
})

更新 Store

state 在外部是无法进行更新的，如果强制更新会导致异常，如果需要更新需要通过 dispatch 方法。

import { createStore } from '@gyron/redux'

const store = createStore({
  reducer: (state = { value: 0 }, action) => {
    switch (action.type) {
      case 'counter/incremented':
        return { value: state.value + 1 }
      case 'counter/decremented':
        return { value: state.value - 1 }
      default:
        return state
    }
    return state
  },
})

const state = store.extra.getState()
// 错误的更新
state.value = 1
// 正确的更新
store.extra.dispatch({ type: 'counter/incremented' })

完整示例

完整示例将介绍如何使用 @gyron/redux 连接 gyron 和 redux，您还可以下载 redux 周边生态工具，比如 redux-devtools。

store.ts

import { createStore, createSlice } from '@gyron/redux'
import Counter from './module/counter'

const counter = createSlice({
  name: 'counter',
  initialState: {
    count: 0,
  },
  reducers: {
    increment(state) {
      state.count++
    },
  },
})

export const store = createStore({
  reducer: {
    Counter: counter.reducer,
  },
})

export const { increment } = counter.actions

index.tsx

import { createInstance, FC } from 'gyron'
import { Provider } from '@gyron/redux'
import { useSelector, useDispatch } from '@gyron/redux'
import { store, increment } from './store'

const App = FC(() => {
  const { Counter } = useSelector()
  const dispatch = useDispatch()

  return (
    <div onClick={() => dispatch(increment())}>
      这是一个累加器的 Demo：{Counter.count}
    </div>
  )
})

createInstance(
  <Provider store={store}>
    <App />
  </Provider>
).render('#root')