rc-redux-modelredux 樣板代碼輔助工具

rc-redux-model 提供了一種較為舒適的數(shù)據(jù)狀態(tài)管理書寫方式，讓你簡潔優(yōu)雅地去開發(fā)；內部自動生成 action, 只需記住一個 action，可以修改任意的 state 值，方便簡潔，釋放你的 ?? CV 鍵～

rc-redux-model 參考了 dva 的數(shù)據(jù)流方案，在一個 model 文件中寫所有的 action、reducer、state，解讀了 redux-thunk 的源碼，內部實現(xiàn)了一個中間價，同時提供默認行為 action，調用此 action 可以直接修改任意值的 state，例如 :

只需要定義一個 model

export default {
  namespace: 'reduxModel',
  state: {
    testA: '',
    testB: [],
  },
}

那么 rc-redux-model 會自動幫你注冊 action 及 reducers，等價于 :

export default {
  namespace: 'reduxModel',
  state: {
    testA: '',
    testB: [],
  },
  action: {
    settestA: ({ commit, currentAction }) => {
      commit({
        type: 'SET_REDUXMODEL_TESTA',
        payload: currentAction.payload,
      })
    },
    settestB: ({ commit, currentAction }) => {
      commit({
        type: 'SET_REDUXMODEL_TESTB',
        payload: currentAction.payload,
      })
    },
    // 推薦使用此action進行修改reducers值
    setStore: ({ dispatch, currentAction }) => {
      dispatch({
        type: `reduxModel/change${currentAction.payload.key}`,
        payload: currentAction.payload.values,
      })
    },
  },
  reducers: {
    ['SET_REDUXMODEL_TESTA'](state, payload) {
      return {
        ...state,
        ...payload,
      }
    },
    ['SET_REDUXMODEL_TESTB'](state, payload) {
      return {
        ...state,
        ...payload,
      }
    },
  },
}

那么你只需要在組件中，調用的默認 Action 即可

class MyComponent extends React.Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'reduxModel/setStore',
      payload: {
        key: 'testA',
        values: '666',
      },
    })
  }
}

? 特性

• 輕巧簡潔，寫數(shù)據(jù)管理就跟寫 dva 一樣舒服
• 異步請求由用戶自行處理，內部支持 call 方法，可調用提供的方法進行轉發(fā)，該方法返回的是一個 Promise
• 參考 redux-thunk，內部實現(xiàn)獨立的中間件，所有的 action 都是異步 action
• 提供默認行為 action，調用此 action ，可以修改任意的 state 值，解決你重復性寫 action 、reducers 問題
• 內置 seamless-immutable ，只需開啟配置，讓你的數(shù)據(jù)不可變
• 默認檢測不規(guī)范的賦值與類型錯誤，讓你的數(shù)據(jù)更加健壯