使用 Wee-duX 的教程-JavaScript中文网-JavaScript教程资源分享门户

Wee-duX 是一个基于 Redux 的轻量级状态管理器，旨在提供更简洁、易用的 API，以满足开发者在 Redux 使用上的一些痛点。它具有以下特点：

基于 Ducks 结构，将所有相关内容都放在同一个文件中
支持类似于 mobx 的 observer 模式，当状态改变时会自动更新 UI
API 简单易用，可视为 Redux 的兼容替代方案

在本文中，我将详细介绍如何使用 Wee-duX 进行前端开发。

安装

你可以使用 npm 包管理器进行安装：

npm i wee-dux

基础概念

在开始之前，我们需要了解以下几个基础概念：

Store

Store 是整个应用的唯一数据源，其中保存了应用的所有状态信息。

Reducer

Reducer 是一个纯函数，用来描述如何根据 Action 来更新 Store 中的状态。

Action

Action 是一个普通的 JavaScript 对象，用来描述 Reducer 如何更新 Store。

Model

Model 是一个包含 Redux 中的对应内容的对象。

Duck

Duck 是一个基于 Model 的文件，其中包含了 Redux 中 Action、Reducer、ActionTypes 和 Selectors。

使用

创建 Store

首先，我们需要创建一个 Store 实例：

import { createStore } from 'wee-dux';

const store = createStore();

createStore 函数可以接收两个参数，分别是 reducers 和 middlewares。

其中，reducers 表示一个包含所有 Reducer 的对象，如果不传，则默认使用 {}。

-- -------------------- ---- -------
----- -------- - -
  ----- ------ - --- ------- -- -
    ------ ------------- -
      ---- -----------
        ------ -
          ---------
          - ----- ------------ ---------- ----- -
        --
      ---- --------------
        ------ ---------------- ------ -- -
          -- ------ --- ------------- -
            ------ - -------- ---------- --------------- --
          -
          ------ -----
        ---
      --------
        ------ ------
    -
  -
--

----- ----- - ----------------------

middlewares 表示一个包含所有 middleware 的数组，如果不传，则默认使用 []。

const logger = store => next => action => {
  console.log('dispatching', action);
  const result = next(action);
  console.log('next state', store.getState());
  return result;
};

const store = createStore({}, [logger]);

创建 Duck

创建一个 Duck 用来管理所有 Todo 相关的内容：

-- -------------------- ---- -------
------ ------- -
  ---------- -------
  ------ ---
  --------- -
    ---------- - ------- -- -
      ------ -
        ---------
        - ----- -------- ---------- ----- -
      --
    --
    ------------- - ------- -- -
      ------ ---------------- ------ -- -
        -- ------ --- -------- -
          ------ - -------- ---------- --------------- --
        -
        ------ -----
      ---
    --
  -
--

上面的代码中，我们定义了 Todo 的 namespace 是 todo，创建了 add 和 toggle 两个 Reducer。

除此之外，它还可以包含 effects、selectors、actions 和 subscriptions 等内容。这里我们不再一一介绍。

使用 Duck

在 Wee-duX 中使用 Duck 很简单，只需要在创建 Store 实例时将其传入即可：

import { createStore } from 'wee-dux';
import todoDuck from './ducks/todo';

const store = createStore({
  todos: todoDuck.model
});

store.dispatch({ type: 'todos/add', payload: 'Learn Wee-duX' });

如果你希望自定义 Duck 的名称，可以使用 as 关键字：

import { createStore } from 'wee-dux';
import todoDuck from './ducks/todo';

const store = createStore({
  items: todoDuck.model as todo
});

store.dispatch({ type: 'items/add', payload: 'Learn Wee-duX' });

连接到 UI

我们可以使用 observer 连接到 UI 上，实现当状态改变时 UI 自动更新的功能：

-- -------------------- ---- -------
------ - -------- - ---- ----------

----- ------------ - ----------- ---- -- -- -
  ---
    ----------- -- -
      ----------------
        ----- ---------------
        -------- ----------
      ---
    --
    --------
      --------------- -------------- - -------------- - -------
      ------- ---------
    --
  -
    -----------
  -----
---

常见问题

`observer` 被调用多次造成性能问题

在某些场景下，我们可能会发现 observer 被多次调用，导致组件重复渲染，从而影响性能。

这时，我们需要使用 observer 的 options 参数，可以传入一个 compare 函数来进行比较，从而减少不必要的组件渲染。

-- -------------------- ---- -------
----- ------------ - ---------
  -- ---- -- -- -
    ---
      ----------- -- -
        ----------------
          ----- ---------------
          -------- ----------
        ---
      --
      --------
        --------------- -------------- - -------------- - -------
        ------- ---------
      --
    -
      -----------
    -----
  --
  -
    -------- ----------- ---------- -- -
      ------ -------------------- --- ---------------------
    -
  -
--

结语

通过本文的介绍，相信大家已经对 Wee-duX 有了更深入的理解，并能够更好地应用到自己的项目中。如果你还有任何疑问或者建议，请在评论中留言，我会尽快回复。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6006710a8dd3466f61ffe0a2

使用 Wee-duX 的教程

安装