React: организация стейт менеджмента?

Question

[thehighhomie]

Есть папка store, в ней лежат глобальные редюсеры, селекторы, экшены, константы.

Не получается грамотно организовать все это. Я хочу, чтобы у меня был глобальный стейт, и в нем были разные вложенные свойства, например theme:

state = {
  theme: 'light'
}

Используя селекторы, я хочу получить конкретное свойство из стейта, к примеру:

const theme = useSelector(selectors.theme)

Хочу, чтобы в переменной theme лежало значение state.theme, но по факту получается так: theme.theme.

Вот песочница, посмотрите, может я криво rootReducer описал или еще что, или же я не правильно селекторами пользуюсь, хотя смотрел несколько док с использованием селекторов.

Answer 1

[0xD34F]

хочу, чтобы в переменной theme лежало значение state.theme, но по факту получается так: theme.theme

Ну так вы сами объект засунули.

Хотите строку - храните строку:

export const theme = (state = 'light', action) => {
  switch (action.type) {
    case constants.CHANGE_THEME:
      return action.payload;

    default:
      return state;
  }
};

Answer 2

[shsv382]

Может я конечно устарел в этом плане, но... Я не понял, где находятся две вещи:
1. В индексе вроде надо делать const store = createStore(rootReducer)

2. Компонент App надо подписывать на изменения store

export default connect(mapStateToProps, mapDispatchToProps)(App)

Или в последних версиях таких танцев с бубном уже нет?

Comments

[shsv382]

На первый вопрос ответ нашёл - немного непривычно организовано все...

Ну а насчёт изменения store все в силе - не совсем понял, откуда ты вообще получаешь к нему доступ?

[G F]

shsv382, react-redux hooks