使用redux鏈接操作和構建對象

Question

下面我有一些redux實現，我想在概念上包圍我的頭腦。

我想在后端使用redux來幫助維護代碼的控制流程。 我在getRequirerDir ， getPathResolved和getModuleResolved之下有簡單的函數。 我想使用redux中的操作將這三個函數鏈接在一起，我想構建一個返回值的對象。 其中一個是承諾。 我實現了redux thunk。

const start = (moduleString, requirer) => {type: 'START', moduleString, requirer}

const moduleString = './index.js'
const requirer = ''
store.dispatch(start(moduleString, requirer))

const getRequirerDir = (requirer) => path.dirname(requirer)
const getPathResolved = (requirerDir, moduleString) => path.resolve(requirerDir, moduleString)
const getModuleResolved = async (pathResolved) => await ModuleString.resolve(pathResolved)

// starting state
// {}

// ending state
// {moduleString, requirer, requirerDir, pathResolved, moduleResolved}

Answer 1

注意：這可能無法完全回答您的問題。

這是個有趣的問題。 我注意到你自己已經完成了預期的實施。 對此表示贊賞。 但是，在后端維護應用程序狀態是一種不好的做法。 但有些情況下您可能希望暫時維持狀態。 如果上述州停留較長時間，我建議您使用redis。

如果沒有，有不同的方法來解決您的問題。 我能為你的用例考慮的最合適的是SAGA。 使用Sagas，您可以將應用程序編寫為狀態機。 這個概念也用於實現Redux-Saga庫。 但是，您可能希望手動實現Sagas或使用專為NodeJ設計的Saga庫。

Answer 2

這是一個完整的工作示例。

const thunk = require('redux-thunk').default
const { createStore, applyMiddleware } = require('redux')
const ModuleString = require('../ModuleString')
const Path = require('../Path')

function reducer (state = {}, action) {
  const {type, ...actionData} = action
  switch (type) {
    case _getDeps:
      return {...state, ...actionData}
    case _getRequirerDir:
      return {...state, ...actionData}
    case _getPathResolved:
      return {...state, ...actionData}
    case _getModuleResolved:
      return {...state, ...actionData}
    default:
      return state
  }
}

const _getDeps = 'getDeps'
const _getRequirerDir = 'getRequirerDir'
const _getPathResolved = 'getPathResolved'
const _getModuleResolved = 'getModuleResolved'

const actionCreators = {
  [_getDeps]: (moduleString, requirer) => async (dispatch, getState) => {
    await dispatch(({type: _getDeps, moduleString, requirer}))
    await dispatch(actionCreators.getRequirerDir(moduleString, requirer))
  },
  [_getRequirerDir]: (moduleString, requirer) => async (dispatch) => {
    const requirerDir = getRequirerDir(requirer)
    await dispatch(({type: _getRequirerDir, requirerDir}))
    await dispatch(actionCreators.getPathResolved(requirerDir, moduleString))
  },
  [_getPathResolved]: (requirerDir, moduleString) => async (dispatch) => {
    const pathResolved = getPathResolved(requirerDir, moduleString)
    await dispatch(({type: _getPathResolved, pathResolved}))
    await dispatch(actionCreators.getModuleResolved(pathResolved))
  },
  [_getModuleResolved]: (pathResolved) => async (dispatch) => {
    const moduleResolved = await getModuleResolved(pathResolved)
    await dispatch(({type: _getModuleResolved, moduleResolved}))
  }
}

const store = createStore(
  reducer,
  applyMiddleware(thunk)
)

store.subscribe(() => console.log(store.getState()))

const moduleString = './index.js'
const requirer = ''
store.dispatch(actionCreators.getDeps(moduleString, requirer))

const getRequirerDir = (requirer) => Path.dirname(requirer)
const getPathResolved = (requirerDir, moduleString) => Path.resolve(requirerDir, moduleString)
const getModuleResolved = async (pathResolved) => ModuleString.resolve(pathResolved)

反饋/優化歡迎。