Плохая идея поместить операцию dom в редуктор redux?

Question

У меня есть несколько действий, в которых используется один и тот же редуктор, и вместо того, чтобы выполнять операцию dom в каждом из этих действий, я хочу просто добавить его один раз в свой общий редуктор. Я знаю, что редукторы должны быть чистыми (а возвращаемые данные все еще остаются), но это какой-то антишаблон или приемлемая стратегия?

 case APPEND_POSTS:
      !payload.length &&
        document.getElementById('posts-cont').classList.add('no-more-posts'); // this 
      const total = state.posts.length + payload.length;
      const limit = total > posts_to_keep_limit ? 50 : 0;
      return {
        ...state,
        posts: [...state.posts.slice(limit), ...payload],
        loading: false,
      };
    ```

Answer 1

Redux Action

 case APPEND_POSTS:
      // you don't need to use below code.
      // !payload.length && document.getElementById('posts-cont').classList.add('no-more-posts'); // this 
      const total = state.posts.length + payload.length;
      const limit = total > posts_to_keep_limit ? 50 : 0;
      return {
        ...state,
        posts: [...state.posts.slice(limit), ...payload],
        nomore: true,
        loading: false,
      };

Ваш компонент.

function YourComp(props){
  const state = useSelector(...); 

  return ( <div id="posts-cont" className={state.nomore ? 'no-more-posts' : ''} > {...}</div>

 
} 

Answer 2

Я знаю, что редукторы должны быть чистыми (а возвращаемые данные все еще остаются), но это какой-то антишаблон или приемлемая стратегия?

Возвращенные данные чистые, но вы ввели побочный эффект в виде мутации DOM. Следовательно, этот редуктор не чистый.

Это действительно антипаттерн, потому что теперь компонент (ы), отображающий posts-contэлементы имеют невидимую связь с этим редуктором. Это затрудняет чтение и отладку вашей кодовой базы.

Answer 3

Совет jinongun хорош: пусть className компонента получает свое значение из состояния магазина с помощью селектора. КАК на общий вопрос

У меня есть несколько действий, в которых используется один и тот же редуктор, и вместо того, чтобы выполнять операцию dom в каждом из этих действий, я хочу просто добавить его один раз в свой общий редуктор.

НИКОГДА не выполняйте операции DOM внутри редуктора. Никогда не выполняйте никаких операций, кроме чистых вычислений.

Но вы можете создать создателя действий, который всегда вызывает побочный эффект (с помощью Redux-Thunk):

function appendPosts(payload) {
  return dispatch => {
    mySideEffect()

    dispatch({
      type: APPEND_POSTS,
      payload
    })
  }
}

function action1(params) {
  return dispatch => {
    dispatch({
      type: ACTION1,
      payload: params
    })    

    dispatch(appendPosts(params))
  }
}

function action2(params) {
  return dispatch => {
    dispatch({
      type: ACTION2,
      payload: params
    })    

    dispatch(appendPosts(params))
  }
}

// etc