Особенности условного рендеринга в React

2022-01-21T05:33:21.294Z

const Header: FC<{ id: number }> = ({ id }) => (
  <ul>
    <li><a href="/"</a>Главная</li>
    <li><a href="/contacts"</a>Контакты</li>

    {id && (
      <li><a href="/somewhere">куда-то</a></li>
    )}
  </ul>
);

Что здесь: передаем пропом число id, и если оно есть, то рендерим элемент списка.

Вроде бы все хорошо, но на самом деле опасно. Если id будет равен нулю, то компонент не отрендерится. Зато отрендерится 0.

То есть при id === 0на странице получится такая разметка

<ul>
 <li><a href="/"</a>Главная</li>
 <li><a href="/contacts"</a>Контакты</li>>
  0
</ul>

Почему так

Первый момент, что если при логическом операторе И (&&) один из операторов ложен, то он и вернется. То есть в нашем случае вернулся 0, т.к. число ноль при логическом преобразовании ложно.

0 && 1 // 0
2 && 3 // 3
1 && 0 && 2 // 0

Второй момент, что в реакте рендерятся числа. То есть вы можете сделать компонент, который возвращает число 0 и все нормально отобразится.

export const App = () => {
 return 0;
}

Другое дело, если бы вернулся не 0, а false — его реакт не отрендерит.

export const App = () => {
 return false;
}

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

То есть в нашем случае лучше будет

const Header: FC<{ id: number }> = ({ id }) => (
  <ul>
    <li><a href="/"</a>Главная</li>
    <li><a href="/contacts"</a>Контакты</li>

    {Boolean(id) && (
      <li><a href="/somewhere">куда-то</a></li>
    )}
  </ul>
);

Альтернативная запись

В логическом контексте, можно также преобразовать двойным отрицанием: !!

const Header: FC<{ id: number }> = ({ id }) => (
  <ul>
    <li><a href="/"</a>Главная</li>
    <li><a href="/contacts"</a>Контакты</li>

    {!!id && (
      <li><a href="/somewhere">куда-то</a></li>
    )}
  </ul>
);

Redux — для чего он нужен

2021-04-10T17:58:34.255Z

Все взаимодействие нашего приложения происходит в интерфейсе. Но хочется отделить бизнес-логику, чтобы было проще разрабатывать и дебажить.

Одна из архитектур для работы с данными Flux. Мы делаем действие из интерфейса, в действии читаем логику и обновляем состояние. А интерфейс всегда отображает текущее состояние.

Вот названия по-научному.

И картинка из интернета

Redux — это реализация архитектуры Flux.

Мы создаем store с помощью функции createStore

const store = createStore(reducer, middlewares);

reducer — это функция, которая обновляет стор в зависимости от экшена.

middlewares — это промежуточные слои, прежде чем экшн дойдет до редьюсера.

Дальше стор можно диспатчить и смотреть текущее состояние

// В диспатч обязательно надо передать type, тип экшена,
// чтобы редьюсер мог обновить состояние по этому типу
// payload — это дополнительные данные
store.dispatch({ type: 'myAction', payload: { s: 2 } });

store.getState(); // Вернет текущее состояние

В редьюсере важно всегда возвращать новый объект, чтобы не было неочевидных багов, т.к. интерфейс отображает текущее состояние. После того, как новое состояние вернется из редьюсера, реакт обновится.

const reducer = (state = {}, { type, payload }) => {
  switch (type) {
    case 'myAction': {
      return {
        ...state,
        result: 2 + payload.s,
      };
    }
 
    default: {
      return state;
    }
  }
};

Редакс подключается к реакту также, как мы подключаем контекст

import { Provider } from 'react-redux';
import { createStore } from 'redux';
 
const store = createStore(() => ({}));
 
const App = () => (
  <Provider store={store}>
    <h1>Привет, это 0xLDev</h1>
  </Provider>
);

Чтобы использовать состояние или диспатчить экшены, используем хуки

import { useDispatch, useSelector } from 'redux';
import { getFunc } from './actions';
 
const Component = () => {
  const dispatch = useDispatch();
  const name = useSelector((state) => state.name);
 
  return (
    <button onClick={() => dispatch(getFunc)}>{name}, нажми на меня!</button>
  );
};

Для асинхронных запросов в экшенах используем библиотеку redux-thunk. Она позволяет не возвращать объект из экшена сразу, а задиспатчить его отдельно. Причем несколько раз.

export const getFunc = () => (dispatch, getState) => {
  const state = getState();  // Посмотреть состояние для валидации, например. 
  dispatch({ type: 'fetchStart' });
  fetch(url)
    .then(() => dispatch({ type: 'fetchSuccess' }))
    .catch(() => dispatch({ type: 'fetchFail' }))
};

redux-thunk работает через middleware. Подключаем к стору так

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
 
const store = createStore(reducer, applyMiddleware(thunk));

MiddleWare — это функция, которая вызовется перед попаданием в редьюсер. Мы пишем свои middleware для логирования. Внутри он выглядит так

const middleware = (store) => (next) => (action) => {
  // ...тут делаем все, что нам нужно
  
  // когда будем готовы передать экшн дальше
  // в редьюсер или следующий по порядку миддлвэр
  // пишем так. Вызвать можно только один раз
  next(action);
};

Самый кайф редакса в логировании бизнес-логики. И redux-devtools-extension помогает удобно смотреть изменения.

@0xldev

Особенности условного рендеринга в React

Redux — для чего он нужен