前言
redux-make-mori 是一个能够让 Redux 更易于使用的工具，它为 Redux 降低了使用难度，使得开发者能够更加快速地开发出功能完善的应用程序。本文将会介绍 redux-make-mori 的原理和使用方法，以及如何将其引入到你的项目中。
什么是 redux-make-mori
redux-make-mori 是一个用于简化 Redux 操作的工具，通过在 Redux 的基础上封装了一些方法，使得开发者可以更加方便地进行状态管理。redux-make-mori 中主要包括如下几个功能：
- createState：创建状态
- createAction：创建动作
- createReducer：创建 reducer
- combineReducer：将多个 reducer 合并成一个 reducer
- createInitialStore：创建 store
安装 redux-make-mori
首先，你需要在你的项目中安装 redux-make-mori，可以通过以下命令进行安装：
npm install redux-make-mori
或者使用 yarn 安装：
yarn add redux-make-mori
使用 redux-make-mori
接下来，我们来一步一步地介绍如何使用 redux-make-mori。为了更好地说明，我们假设我们要开发一个 Todo 应用来演示具体的用法。
创建状态
首先，我们需要创建一个状态来存储 Todo list，使用 createState 方法可以方便地创建一个状态：
import { createState } from 'redux-make-mori';
const initialState = {
todoList: [],
};
export const state = createState(initialState);创建动作
接着，我们需要创建一些动作来操作 Todo list。在 redux-make-mori 中，我们可以使用 createAction 方法来创建一个动作：
import { createAction } from 'redux-make-mori';
export const addTodo = createAction('add_todo');
export const removeTodo = createAction('remove_todo');
export const toggleTodo = createAction('toggle_todo');创建 reducer
有了动作和状态，接下来我们需要创建 reducer 来处理动作并更新状态。redux-make-mori 中提供了两种方式来创建 reducer，一种是通过 createReducer 方法创建 reducer，另一种是通过 combineReducer 方法将多个 reducer 合并成一个 reducer。
使用 createReducer 方法创建 reducer
使用 createReducer 方法创建 reducer 相对比较简单，我们只需要传入初始状态和一个对象，对象中以动作类型为键，处理函数为值即可：
-- -------------------- ---- -------
------ - ------------- - ---- ------------------
----- ----------- - --------------------------- -
---------- ------- ------- -- --
---------
--------- ------------------- ----------------
---
------------- ------- ------- -- --
---------
--------- -------------------------- -- ------- --- ----------------
---
------------- ------- ------- -- --
---------
--------- ----------------------- -- -
-- -------- --- --------------- -
------ - -------- ---------- --------------- --
-
------ -----
---
---
---
------ ------- ------------使用 combineReducer 方法创建 reducer
使用 combineReducer 方法需要将多个 reducer 合并成一个 reducer，这里我们假设我们有两个 reducer，一个用于处理 Todo list，另一个用于处理 Filter 条件：
import { combineReducer } from 'redux-make-mori';
const rootReducer = combineReducer({
todo: todoReducer,
filter: filterReducer,
});
export default rootReducer;创建 store
有了 reducer，我们接下来需要创建 store，并将创建好的 reducer 传入其中：
import { createInitialStore } from 'redux-make-mori';
import rootReducer from './reducer';
export const { store, history } = createInitialStore({
reducer: rootReducer,
middlewares: [], // 中间件列表
initialState: {}, // 初始状态
});将 redux-make-mori 引入到组件中
现在我们已经成功创建了 store 和 reducer，接下来我们需要将其引入到组件中，这里我们以 React 为例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----- - ---- ----------
----- --- - -- -- -
------ -
--------- --------------
--------- ---------
-----------
--
--
------ ------- ----至此，我们已经成功地引入了 redux-make-mori，并创建了一个能够管理 Todo list 的应用程序。
总结
通过本篇文章的介绍，你应该已经能够了解到 redux-make-mori 的使用方法，以及如何将其引入到你的项目中。使用 redux-make-mori，可以让开发者更加方便地进行状态管理，使得开发效率得到了提升。同时，redux-make-mori 的原理也非常简单，对于 Redux 的理解也会有一定的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8af0