Что должно быть вокруг store в Redux

Ответ

В Redux store должен быть обернут в <Provider> из react-redux, который передает store всему приложению через контекст. Provider принимает store как пропс.

Пример:

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Дополнительно store можно обернуть:

  • Middleware (redux-thunk, redux-saga)
  • DevTools для отладки
  • Enhancers для расширения функционала

Важно, чтобы store был единственным для всего приложения и инициализировался до рендера корневого компонента.

Ответ 18+ 🔞

Эй, слушай сюда, ты, разработчик, который пытается запихнуть Redux в свой проект! Ты знаешь, что твой store — это как священный Грааль, да? И его нельзя просто так, с бухты-барахты, тыкать в компоненты. Его надо, блядь, обернуть!

Вот представь: есть у тебя <Provider> из react-redux. Это такой хитрожопый поставщик, который как шлюха с контекстом, раздает твой store всем желающим компонентам в приложении. Просто суёшь ему store как пропс, и всё — магия начинается.

Смотри, как это выглядит, без всякой поебени:

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Видишь? Засунули store в Provider, а Provider — в корень. И теперь любой компонент внутри <App /> может начать выпрашивать себе кусочки состояния, как голодный пёс.

Но это, сука, ещё не всё! Ты же не идиот, чтобы использовать голый store? Его можно и нужно обвешать всякой хуйней, как новогоднюю ёлку:

  • Middleware (типа redux-thunk, redux-saga) — это чтобы твои action creators не были тупыми, как пробка, и могли делать асинхронную дичь.
  • DevTools — святое дело! Чтобы не дебажить вслепую, а видеть, что там у тебя в store творится, как в аквариуме.
  • Enhancers — ну, это для полных извращенцев, которые хотят расширить функционал до овердохуища.

Главное правило, которое если нарушишь — получишь пизды: store должен быть единственным на всё приложение. Один, как хуй с горы! И создавать его надо до того, как React начнёт рендерить твой корневой компонент. Иначе будет тихий, но уверенный пиздец, и ничего работать не будет.

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