概述
Redux 是一种用于 JavaScript 应用的可预测状态容器，可用于构建单页面应用程序以及 React 应用程序，极大的提高了前端开发效率，简化了复杂的应用开发流程。
而在 Redux 中，使用 createStore 创建 store 订阅仓库进行状态管理，Redux-Thunk 等等中间件也为了解决异步问题，但是对于复杂的项目结构和状态管理，还是会显得有些麻烦。而 redux-create 则为了解决这个痛点，进一步显著提高状态管理的便利性。
安装
在安装前请务必确认已安装了 Redux 库。
npm install redux-create
基本使用
创建 model
首先需要创建一个 Redux model。 model 就是处理和控制每个状态的逻辑代码。
-- -------------------- ---- -------
------ - ----------- - ---- ---------------
----- ------- - -------------
----- ----------
------ -
------ --
--
--------- -
---------------- -
------ -
------ ----------- - --
--
--
---------------- -
------ -
------ ----------- - --
--
--
--
-------- -- -------- -- -- --
----- ---------------- -
----- --- ----------------- -- ------------------- -------
---------- ----- ----------- ---
--
---
---
------ ------- --------值得注意的是，createModel 接收一个对象作为参数，对属性的解释如下：
name: model 的名字，必选state: model 的初始状态，必选，也可以是异步的初始状态reducers: 用于管理和处理状态的纯函数，必选actions: 异步版本的reducers，可选
创建 store
通过 createStore 方法和 combineReducers 方法，创建 Redux store。
import { combineReducers, createStore } from 'redux';
import counter from './model/counter';
const reducer = combineReducers({ counter });
const store = createStore(reducer);下面我们可以通过 store.getState() 直接获取当前的状态：
console.log(store.getState());
在 React 中使用
首先，需要将 store 包含在 <Provider> 组件中，然后就可以在组件中使用 connect 方法，绑定 action 和 state。
-- -------------------- ---- -------
------ - --------- ------- - ---- --------------
------ ------- ---- ------------------
----- --- ------- --------------- -
-------- -
----- - ------ ---------- ---------- -------------- - - -----------
------ -
-----
--------------
------- ------------------------------
------- ------------------------------
------- ---------------------------------------
------
--
-
-
----- --------------- - -- ------- -- -- -- ------ ------------- ---
----- ------------------ - -
---------- --------------------------
---------- --------------------------
--------------- -------------------------------
--
----- ------------ - ------------------------ -------------------------
----------------
--------- --------------
------------- --
------------
-------------------------------
--进阶
引用其他 models
在相当简单的应用程序中，可能只需要使用一个单独的 model，但是在更复杂的应用程序中，可能需要引用并使用其他的 model。
为了做到这一点，redux-create 使用 models 属性，接受一个对象，对象的每个属性都是独立的 model 对象。
import global from './common/global';
import index from './modules/index';
import user from './modules/user';
const models = { global, index, user };
const rootReducer = combineReducers(models);
const store = createStore(rootReducer);createModel 中的自动类型推断
createModel 会使用 typescript 或者 flow 原生自带的结构来做到自动类型推断，在使用响应式框架时，也能即时智能地发现数据通道上的错误类型，避免不必要的开发错误。
使用 reducers
Redux-Create 支持多个 reducers，每个 reducers 可以处理多个状态值，这样能够更加地灵活方便。
-- -------------------- ---- -------
----- ------- - -------------
---------- ----------
------ -
------ --
--
--------- -
---------------- ------- -
----- - ------- - - -------
------ -
------ ----------- - --------
--
--
---------------- ------- -
----- - ------- - - -------
------ -
------ ----------- - --------
--
--
--------------- ------- -
----- - ------- - - -------
------ -
------ --------
--
--
--
---
----- - -------- -------- - - --------使用 actions
Redux-Create 支持多个 actions，每个 actions 可以包含多个异步以及同步处理方法，这样能够更加地灵活方便。
-- -------------------- ---- -------
----- -------------- - -------------
---------- -----------
------ -
------ ---
-------- -----
------ -----
----------- ---
--
--------- -
----------- - ------- -- -
------ -
---------
------ -------------
----------- -
-------- ---------------------
------ --------------
--------- -----------------
--
-------- ------
--
--
--------------------- - ------- -- -
------ - --------- ---------- --
--
--
-------- -- -------- -- -- --
----- ------------- -
----------
----- -----------------
-------- -
-------- -----
------ -----
--
---
--- -
----- -------- - ----- ------------- --------
----- ---- - ----- ----------------
---------- ----- ------- -------- ---- ---
- ----- ------- -
----------
----- -----------------
-------- - -------- ------ ------ ------------- --
---
-
--
---
---
----- - ------- - - ---------------总结
Redux-Create 封装得非常好，通过对 reducers 和 actions 的拆分，完美处理了状态管理的复杂度问题。Redux-Create 还支持 TypeScript，大大提高了开发中的健壮性和可维护性。通过 Redux-Create，我们可以快速构建出一款便利、可维护的状态管理工具，为我们日常开发提供强有力的支撑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a97