Redux 是一个流行的 JavaScript 应用程序状态管理库。Redux Store Filler 是一个强大的工具，它可以帮助你轻松地填充 Redux 存储中的数据。本文将为您介绍如何使用这个工具。
安装
使用 npm 安装 Redux Store Filler:
npm install redux-store-filler --save-dev
我们可以将他保存在开发依赖里，因为它只是用来测试数据。
使用
首先，导入 redux-store-filler:
import fillStore from "redux-store-filler";
然后，定义您的 Redux 存储:
import { createStore } from "redux";
import rootReducer from "./reducers";
export const store = createStore(rootReducer);现在，我们可以使用 fillStore 函数来填充我们的 Redux 存储:
fillStore(store, {
todos: [
{ id: 1, text: "learn redux", completed: false },
{ id: 2, text: "write a blog post", completed: true },
],
visibilityFilter: "SHOW_ALL"
});上面的代码将添加一个包含两个任务和一个过滤器的状态到 Redux 存储中。
示例代码
首先，让我们创建一个简单的 Redux 应用程序。
源代码
src/actions/index.js
-- -------------------- ---- ------- ------ ----- -------- - ----------- ------ ----- ----------- - -------------- ------ ----- --------------------- - ------------------------ --- ---------- - -- ------ ----- ------- - ---- -- -- ----- --------- --- ------------- ---- --- ------ ----- ---------- - -- -- -- ----- ------------ -- --- ------ ----- ------------------- - ------ -- -- ----- ---------------------- ------ ---
src/reducers/index.js
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ -
---------
------------
----------------------
-----------------
- ---- -------------
----- - -------- - - ------------------
----- ---------------- - ------ - --------- ------- -- -
------ ------------- -
---- ----------------------
------ --------------
--------
------ ------
-
--
----- ----- - ------ - --- ------- -- -
------ ------------- -
---- ---------
------ -
---------
-
--- ----------
----- ------------
---------- -----
-
--
---- ------------
------ -------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
--
--------
------ ------
-
--
------ ------- -----------------
-----------------
-----
---src/containers/VisibleTodoList.js
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- - ---- -------------
------ -------- ---- -------------------------
------ - ----------------- - ---- -------------
----- --------------- - ------- ------- -- -
------ -------- -
---- ---------------------------
------ ------
---- ---------------------------------
------ -------------- -- -------------
---- ------------------------------
------ -------------- -- --------------
--------
----- --- -------------- ------- - - --------
-
--
----- --------------- - ----- -- --
------ ---------------------------- -----------------------
---
----- ------------------ - -------- -- --
----------- -- -- ------------------------
---
------ ------- --------
----------------
------------------
------------src/components/TodoList.js
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ ---- ---- ---------
----- -------- - -- ------ ---------- -- -- -
----
--------------- -- -
----- ------------- --------- ----------- -- -------------------- --
---
-----
--
------------------ - -
------ ------------------
-----------------
--- ----------------------------
---------- --------------------------
----- ---------------------------
-------------
-------------
----------- -------------------------
--
------ ------- ---------src/components/Todo.js
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ---- - -- -------- ---------- ---- -- -- -
---
-----------------
--------
--------------- --------- - -------------- - ------
--
-
------
-----
--
-------------- - -
-------- --------------------------
---------- --------------------------
----- ---------------------------
--
------ ------- -----src/index.js
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- -------------------
------ - -------- - ---- --------------
------ - ----- - ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--src/store.js
import { createStore } from "redux";
import rootReducer from "./reducers";
export const store = createStore(rootReducer);src/components/App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ------------------------
------ --------------- ---- --------------------------------
------ ------ ---- -----------
----- --- - -- -- -
-----
-------- --
---------------- --
------- --
------
--
------ ------- ----测试代码
src/setupTests.js
-- -------------------- ---- -------
------ - ----- - ---- ----------
------ --------- ---- ---------------------
---------------- -
------ -
- --- -- ----- ------ ------- ---------- ----- --
- --- -- ----- ------ - ---- ------ ---------- ---- --
--
----------------- ----------
---这段代码将在每次测试运行之前自动填充我们的 Redux 存储。
src/reducers/index.test.js
-- -------------------- ---- -------
------ ----------- ---- ----------
------ -
--------
-----------
--------------------
---------
------------
---------------------
- ---- -------------
--------------- --------- -- -- -
---------- ------ ---------- -- -- -
-------
--------------- ------------ --- --------
-----------
-
--- --
----- ---- --- -------
---------- -----
-
---
-------
------------
-
-
--- --
----- ---- --- -------
---------- -----
-
--
------------ -------
-
-----------
-
--- --
----- ---- --- -------
---------- -----
--
-
--- --
----- ---- -------
---------- -----
-
---
---
---------- ------ ------------- -- -- -
-------
------------
-
-
--- --
----- ---- --- -------
---------- -----
--
-
--- --
----- ---- -------
---------- -----
-
--
-------------
-
-----------
-
--- --
----- ---- --- -------
---------- -----
--
-
--- --
----- ---- -------
---------- ----
-
---
---
---
-------------------------- --------- -- -- -
---------- ------ ----------------------- -- -- -
-------
--------------- --------------------------------------
-----------
------ ---
----------------- ----------------
---
-------
------------
-
------ -
-
--- --
----- ---- --- -------
---------- -----
-
--
----------------- ----------
--
-------------------------------------
-
-----------
------ -
-
--- --
----- ---- --- -------
---------- -----
-
--
----------------- ----------------
---
---
---src/tests/components/App.test.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- -----------------------
------ ------- ---- ---------------------------
------ --------------- ---- -----------------------------------
------ ------ ---- --------------------------
--------------- -- -- -
----- ------- - ------------ ----
---------- ------ -- ------- ----------- -- -- -
------------------------------------------------
---
---------- ------ - --------------- ----------- -- -- -
--------------------------------------------------------
---
---------- ------ - ------ ----------- -- -- -
-----------------------------------------------
---
---总结
本文详细介绍了如何使用 npm 包 redux-store-filler 填充 Redux 存储。我们还提供了一个示例代码，让您更好地了解如何在项目中使用这个工具。使用这个工具可以大大简化数据测试的编写，并且能够帮助您快速有效地测试您的 Redux 应用程序。希望这篇文章能够帮助你提升你的前端技能和开发经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8581e8991b448d91d5