Где лучше сделать логи приложения redux c? - PullRequest
Новая
       50

Где лучше сделать логи приложения redux c?

0 голосов
/ 04 августа 2020

У меня есть приложение response-redux , в котором существует определенный action -creator (функция получает любой заголовок для фильтрации списка объектов): 

export const filterTests = (title) => dispatch => {
    axios.get(`/api/tests/?title=${title}`)
        .then(res => {
            dispatch({
                type: GET_TESTS,
                payload: res.data
            });
            dispatch({
                type: FILTER_TESTS,
                payload: { title }
            });
        })
        .catch(err => console.log(err))
}

И редюсер : 

export default function (state = initialState, action) {
    switch (action.type) {
        case GET_TESTS:
            return {
                ...state,
                tests: action.payload,
            };
        case FILTER_TESTS:
            return {
                ...state,
                tests: state.tests.filter((test) => test.title.includes(action.payload.title)),
            };
        default:
            return state;
    }
}

Работает, но я думаю, что лучше переместить фильтрующий ligi c в другое место (особенно если я хочу усложнить действие): 

tests: state.tests.filter((test) => test.title.toLowerCase().includes(action.payload.title.toLowerCase()))

Куда лучше перенести этот логи c?

1 Ответ

0 голосов
/ 04 августа 2020

Согласно документации Redux,

Вещи, которые вы никогда не должны делать внутри reducer :

  • Мутировать его аргументы;
  • Выполнить сторону эффекты, такие как вызовы API и переходы маршрутизации;
  • Вызов нечистых функций, например Date.now () или Math.random ().

Пока ваша функция logi c is pure , reducer здесь правильное место.

Если вас беспокоит количество строк кода, вы можете переместить logi c в Utils.js файл с именем функции, например filterByTitle(...). Затем импортируйте эту функцию в редуктор и используйте ее, как показано ниже 

case FILTER_TESTS:
  return {
    ...state,
    tests: filterByTitle(state.tests, action.payload.title),
  };
...