foy

Integrating Redux with a series of api

install

npm install --save @guiguzixl/foy

or

yarn add @guiguzixl/foy

example

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, Provider, connect, applyFoy } from '@guiguzixl/foy'
import { createStore } from 'redux'

const store = createStore({}, applyFoy);

// 在 ConnectContent 组件第一次 render 之前调用
store.mount(foyConfig)

class ConnectContent extends React.PureComponent {
  render() {
    console.log(this.props)
    return (
        <div> content </div>
    )
  }
}
const Wrapper = connect(v => v)(ConnectContent);

class App extends React.PureComponent {
  render() {
    return (
      <Provider store={store}>
        <Wrapper />
      </Provider>
    )
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'))

config

{
  // 每个 foy 实例的标识，与 model 中的 key 值不可重复
  key: '@foy',
  // 如果具体的 model 中配置了，会被覆盖
  defaultData: null,
  dataPath: 'data',
  isNeedInit: true
  models: [
    // 对应每个 api 的配置，抽象为一个 model，其中 key 为必填字段
    {
      // 每个 model 的唯一标识
      key: 'model1',
      /**
       * 进行 api 请求
       * @params {Object} 包含三个属性，当前 foy 实例、当前服务所需要的参数 param、当前服务所依赖的其他服务的值
       * @return responsePromise 返回一个包含服务响应状态的 Promise 对象
      */
      service: ({foy, store, param, dependence}) => responsePromise,
      /**
       * 基于 service 的返回值，进行后续操作
       * @params {Object} 包含 service 的参数，加上 service 的返回值
       * @return 返回一个包含服务响应状态的 Promise 对象
      */
      afterService: ({foy, store, param, dependence, data}) => {},
      // 服务返回的默认值
      defaultData: null,
      // 响应结果的默认取值路径
      dataPath: 'data',
      // 所需要依赖的其他服务
      dependence: [],
      // 是否需要在初始时调用
      isNeedInit: true
    },
    {
      key: 'model2',
      service: () => responsePromise,
      afterService: () => {},
      defaultData: null,
      dataPath: 'data',
      dependence: [],
      isNeedInit: true
    },
    {
      key: 'model3',
      service: () => responsePromise,
      afterService: () => {},
      defaultData: null,
      dataPath: 'data',
      dependence: [],
      isNeedInit: true
    }
    // ...
  ]
}

// store.getState()
{
  '@foy': {
    code,
    data: {
      'model1': {
        code,
        data
      },
      'model2': {
        code,
        data
      }
      //...
    }
  }
}

params

初始化服务数据时所需要的参数，通过 model 中的 key 值，指定各个服务的参数

{
  'model1': {
    a: 123
  },
  'model2': {
    b: 456
  }
}