iron-redux学习记录

新到的这家公司使用的react状态管理中间件是iron-redux，刚来的时候看代码有点吃力，经过一个多星期的查询和练习，大概初步掌握了iron-redux的使用方法，下面记录一下大致的使用方法。

安装

执行下面的指令来安装iron-redux(二者取其一)：

npm i -S iron-redux
//或者使用yarn的方法
yarn add iron-redux

使用

在使用icon-redux的过程中肯定是以实例的方式来展现的，我这个示例的需求很简单就是通过点击按钮实现数字的增加和减少，需求不重要，重要的数字的状态管理是通过iron-redux来完成的。
首先看一下文件结构，后面有完整的代码：

其中index.js是入口文件，rootReducer.tsx是根reducer文件，你可以并且建议定义多个reduer文件，但是都要在根reducer文件中进行声明。ViewReducer.tsx是View视图的状态管理文件，如果视图组件较多的话建议定义文件夹来管理，这里我只有一个View视图，所以就都放在根目录下面了。store.tsx是管理所有状态的库，按我的理解来说就是他是最大的状态管理仓库，和vuex中的store的意义应该是有异曲同工的。设置状态管理的顺序是先定义再使用，所以先来写ViewReducer.tsx。
定义types
在iron-redux中定义了两种action分别是BasicTypes和FetchTypes，这两种action分别是基础类型和请求类型，请求数据的action就是FetchTypes，剩余不涉及到请求数据的action就是BasicTypes。这里我没有涉及到数据请求的数据，所以就在BasicTypes 里面定义了changeId。

enum BasicTypes {
   
  changeId
}
enum FetchTypes {
   
  loadData
}

然后使用composeTypesfunction获取不同的types对象：

const prefix = "test/";
const Types = composeTypes({
   
  prefix,
  BasicTypes,
  FetchTypes
});

定义actions
iron-redux提供createAction 和 createFetchAction来创建action，这两个对应上面不同的types。

const actions = {
   
  changeId: createAction(Types.changeId)<number>()
  
};

然后定义初始的state：

class InitialState {
   
  id = 3;
}

接着定义reducer处理action：

function reducer(state = new InitialState(), action: ActionType<typeof actions>): InitialState {
   
  switch (action.type) {
   
    case Types.changeId: {
   
      const id = action.payload;
      return {
   
        ...state,
        id
      };
    }
    default: {
   
      return AsyncTuple.handleAll(prefix, state, action);
    }
  }
}

然后在View.tsx中使用iron-redux，通过点击增加和减少按钮，来发起action，在reducer拦截到action后就会执行相关的case操作，然后将处理完的值返回来，实现所有的数据的渲染：

import React from