Извлечь Redux Store/State как Селектор

Question

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

import { configureStore } from "../configureStore";
const { store } = configureStore();

export const getSession = () => store.getState().session.data || false;
export const getToken = () => store.getState().session.data.token || false;

Answer 1

Селекторные функции должны принимать состояние хранилища в качестве аргумента, а не захватывать ссылку на хранилище. В качестве примера:

export const getSession = (state) => state.session.data || false;
export const getToken = (state) => state.session.data.token || false;

// use like:
const session = getSession(store.getState());

См. Мой пост Idiomatic Redux: Использование селекторов выбора для инкапсуляции и производительности для получения более подробной информации.

Answer 2

Если вы собираетесь использовать Redux в мире React, то вам непременно следует прикрепить хранилище избыточностей к подпоркам компонента React, используя connect ( https://redux.js.org/basics/usage-with-react).

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

С этим, как правило, вам никогда не нужно store.getState(), Вы делаете что-то вроде:

// selectors.js
const getSession = state => state.session.data || false

// component.js
const MyComponent = ({ session }) => <div>{session}</div>

const mapStateToProps = state => ({
  session: getSession(state),
})

export default connect(mapStateToProps)(MyComponent)