🤷🏼 🌳 🎼 如何减少数量并提高react-redux，redux-saga中代码的可读性 🌶️ 🕓 🆓

在本文中，我将分享我使用react-redux和redux-saga包的经验，或者更确切地说，我使用哪种“自行车”来减少相同类型代码的数量并简化其理解。

什么不适合我

该反应-终极版和终极版，佐贺库是简单的，灵活的和方便的，但有代码的冗余。主要元素是：

活动工厂

const actionCreatorFactory = type => payload => ({ type, payload });

export const INITIALIZE = 'INITIALIZE';

export const ON_FIELD_CHANGE = 'ON_FIELD_CHANGE';
export const onFieldChange = actionCreatorFactory(ON_FIELD_CHANGE);

export const HANDLE_FIELD = 'HANDLE_FIELD';
export const handleField = actionCreatorFactory(HANDLE_FIELD);

export const GO_TO_NEXT_STEP = 'GO_TO_NEXT_STEP';
export const goToNextStep = actionCreatorFactory(GO_TO_NEXT_STEP);

因此，有几件事使我感到困惑：

-事件类型的描述。在此示例中，您当然可以没有常量，但是仍然必须在工厂中传递其类型，该类型将与在camel（camelCase）通知中创建的事件的名称相同。

-如果您忘记了有效负载结构，要调用它，您需要转到reducer / saga，使用该事件的地方，然后查看在那里需要传输的内容

减速器

import getInitialState, {
  formDataInitialState as initialState,
} from '../helpers/initialState';
import { HANDLE_FIELD_DONE, ON_FIELD_CHANGE, RESET } from '../actionCreators';

export default (state = initialState, { type, payload }) => {
  switch (type) {
    case RESET: {
      return getInitialState().formDataInitialState;
    }

    case ON_FIELD_CHANGE: {
      const { name } = payload;
      return {
        ...state,
        [name]: '',
      }
    }

    case HANDLE_FIELD_DONE: {
      const { name, value } = payload;
      return {
        ...state,
        [name]: value,
      }
    }
  }

  return state;
};

通常，这里仅使用开关结构很烦人

萨加斯

import { all, put, select, fork, takeEvery } from 'redux-saga/effects';
import { runServerSideValidation } from '../actionCreators';
import { HANDLE_FIELD } from '../actionCreators';

function* takeHandleFieldAction() {
  yield takeEvery(HANDLE_FIELD, function*({ payload }) {
    const { validation, formData } = yield select(
      ({ validation, formData }) => ({
        validation: validation[payload.name],
        formData,
      })
    );

    const valueFromState = formData[payload.name];

    if (payload.value !== valueFromState) {
      const { name, value } = payload;
      const { validator } = validation.serverValidator;
      yield put(
        runServerSideValidation({
          name,
          value,
          validator,
          formData,
        })
      );
    }
  });
}

export default function* rootSaga() {
  yield all([fork(takeHandleFieldAction())]);
}

在Sagas中，最大的问题是阅读困难。粗略地看一下就知道是什么使传奇变得困难了。原因之一是深层嵌套。当然，您可以减少工作人员来减少深度，但是冗余会增加。

import { all, put, select, fork, takeEvery } from 'redux-saga/effects';
import { runServerSideValidation } from '../actionCreators';
import { HANDLE_FIELD } from '../actionCreators';

function* takeHandleFieldWorker({ payload }) {
    const { validation, formData } = yield select(
      ({ validation, formData }) => ({
        validation: validation[payload.name],
        formData,
      })
    );

    const valueFromState = formData[payload.name];

    if (payload.value !== valueFromState) {
      const { name, value } = payload;
      const { validator } = validation.serverValidator;
      yield put(
        runServerSideValidation({
          name,
          value,
          validator,
          formData,
        })
      );
  }
}

function* takeHandleFieldWatcher() {
  yield takeEvery(HANDLE_FIELD, takeHandleFieldWorker);
}

export default function* rootSaga() {
  yield all([fork(takeHandleFieldWatcher())]);
}

也有一些检查可能会增加嵌套，或者增加传奇中的出口点，这会使我们的代码更糟。

我要如何解决这些问题

让我们去吧。

活动工厂

import { actionsCreator, payload } from 'sweet-redux-saga';

@actionsCreator()
class ActionsFactory {
  initialize;
  
  @payload('field', 'value')
  onFieldChange;
  
  @payload('field')
  handleField;
  
  @payload('nextStep')
  goToNextStep;
}

actionsCreator(). , (initialize;/onFieldChange;/handleField;/gpToNextStep;) action creator. , payload(...[fieldNames]). :

class ActionsFactory {
  initialize = () => ({
    type: 'INITIALIZE',
    payload: undefined,
  });

  onFieldChange = (field, value) => ({
    type: 'ON_FIELD_CHANGE',
    payload: {
      field,
      value,
    },
  });

  handleField = field => ({
    type: 'HANDLE_FIELD',
    payload: {
      field,
    },
  });

  goToNextStep = nextStep => ({
    type: 'GO_TO_NEXT_STEP',
    payload: {
      nextStep,
    },
  });
}

toString, toPrimitive, valueOf. :

const actionsFactory = new ActionsFactory();
console.log(String(actionsFactory.onFieldChange)); // 'ON_FIELD_CHANGE'

import getInitialState, {
  formDataInitialState as initialState,
} from '../helpers/initialState';
import { HANDLE_FIELD_DONE, ON_FIELD_CHANGE, RESET } from '../actionCreators';
import { reducer } from '../../../leadforms-gen-v2/src/decorators/ReducerDecorator';

@reducer(initialState)
export class FormDataReducer {
  [RESET]() {
    return getInitialState().formDataInitialState;
  }

  [ON_FIELD_CHANGE](state, payload) {
    const { name } = payload;
    return {
      ...state,
      [name]: '',
    };
  }

  [HANDLE_FIELD_DONE](state, payload) {
    const { name, value } = payload;
    return {
      ...state,
      [name]: value,
    };
  }
}

reducer([initialState]). , , .

function reducer(state = initialState, action) {
  if (!action) {
    return state;
  }

  const reducer = instance[action.type];
  if (reducer && typeof reducer === 'function') {
    return reducer(state, action.payload);
  }

  return state;
}

import { all, put, select, } from 'redux-saga/effects';
import { runServerSideValidation } from '../actionCreators';
import { HANDLE_FIELD } from '../actionCreators';
import { sagas, takeEvery, filterActions } from 'sweet-redux-saga';

@sagas()
class MySagas {
  @takeEvery([HANDLE_FIELD])
  @filterActions(
    ({state, payload }) => state.formData[payload.name] === payload.value
  )
  * takeHandleFieldAction({ payload }) {
    const { validation, formData } = yield select(({ validation, formData }) => ({
      validation: validation[payload.name],
      formData,
    }));

    const { name, value } = payload;
    const { validator } = validation.serverValidator;
    yield put(
      runServerSideValidation({
        name,
        value,
        validator,
        formData,
      })
    );
  }
}

export default function* rootSaga() {
  yield all([
    new MySagas(),
  ]);
}

使用sagas（）注释创建一个类。在创建类的实例时，我们将获得一个函数生成器，该函数生成器在单独的线程中调用标有takeEvery（[... [actionTypes]]）或takeLatest（[... [actionTypes]]注释）的所有字段：

function* mySagas() {
  yield all([fork(mySagas.takeHandleFieldAction())]);
}

filterActions（{状态，类型，有效负载}） 注释也可以与字段一起使用，在这种情况下，仅当函数返回true时，才调用传奇。

结论

通常，使用这些简单的批注，sagas变得更加清晰和整洁，并减少了添加新逻辑所需的代码量。项目导航变得更加容易。

我在sweet-redux-saga包中做了这些注释。如果还有其他解决方案，我将很高兴与我分享。

如何减少数量并提高react-redux，redux-saga中代码的可读性

什么不适合我

活动工厂

减速器

萨加斯

我要如何解决这些问题

活动工厂

结论

More articles: