Блог

Я хочу выбрать весь фрагмент в redux, как показано ниже:

 interface AuthState {
  user?: User;
  shouldShowLogin: boolean;
}

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setUser: ...,
    showLogin: ...,
    hideLogin: ...,
  },
});

export const useAuth = () => useSelector((state) => state.auth);
 

Так что я мог бы сделать что-то вроде const { user, shouldShowLogin } = useAuth(); в компонентах. Это удобнее в большинстве случаев, но я не уверен, что это плохая практика/неэффективно.

Я хочу сделать что-то подобное для отправки (т. Е. Абстрагироваться от useDispatch()). Может быть, что-то вроде const setUserWithDispatch = (info) => useDispatch()(info); того, что я могу сделать просто setUserWithDispatch(userInfo) в своих компонентах, без необходимости делать useDispatch() и потом dispatch(setUser(userInfo)) .

В идеале я бы хотел это сделать const { user, shouldShowLogin, setUser, showLogin, hideLogin } = useAuth(); , но я не уверен, как это сделать. Опять же, является ли это плохой практикой/неэффективной? Почему redux не настраивает это автоматически?

Компонент будет повторно отправлен, когда значение, выбранное из useSelector изменений. Следовательно, обычно требуется выбрать минимальный объем информации, необходимый для минимизации повторных отправлений.

Если существует несколько свойств, state.auth и вас интересует только одно, то недостатком этого подхода к деструктуризации является то, что он приведет к повторному запуску компонента при изменении других свойств объекта. В вашем примере вы, похоже, используете все свойства, так что это не должно иметь значения.

Я думаю, вам будет трудно сделать что-то на заказ, dispatch не нарушая правил крючков. Крючки не могут быть вызваны условно и должны вызываться на верхнем уровне компонента. Вы не можете вызвать useDispatch (или пользовательский хук, который его использует) внутри обратного вызова обработчика событий, внутри useEffect функции и т. Д.

Текущая реализация useDispatch крючка означает, что вы вызываете useDispatch один раз для каждого компонента, чтобы получить доступ к dispatch функции для текущего хранилища на основе контекста react-redux. Возвращаемая dispatch функция является чистой функцией (не крючком) и может использоваться в любом месте.

Вы можете использовать redux bindActionCreators для привязки действий к отправке для конкретного экземпляра хранилища. Это похоже на то, что вы пытаетесь сделать, но это не рекомендуется. Недостатком является то, что вы создаете ненужную связь между действиями и конкретным экземпляром хранилища. Вы потеряете возможность использовать другой экземпляр хранилища для тестирования.