React-Redux сужающее состояние для дочернего компонента

Question

Есть ли способ передать некоторую часть состояния (не все состояние) дочернему компоненту какого-либо компонента React?Чтобы метод mapStateToProps и метод getState в промежуточном программном обеспечении для редукта использовали такое подсостояние?

Это важно для разработки логики реагирования-редукции, в которой отсутствует информация о структуре состояний, в которой она используется. Затем ее можно использовать в нескольких местах приложения.или разные приложения.Такая логика будет вести себя как независимый модуль и удовлетворять принципу инкапсуляции.

Такая концепция существует в Knockout.js (оператор «с») и в настольном WPF.NET (передача DataContext дочернему элементу).

Спасибо!

Answer 1

Одним из возможных подходов является использование селекторов и / или пространств имен.

С помощью selector вы можете инкапсулировать логику запроса объекта состояния.

Однако вы не можете полностью скрыть избыточностьформа состояния из вашей react-redux логики, так как она оформлена по всему магазину.Тем не менее, мы можем использовать namespace здесь.

Пример:

// counter.js
const namespace = 'counter'
const actualReducer = (state, action) => action.type === 'INC' ? state + 1 : state;
export default { [namespace]: actualReducer }
export const selector = (state, ownProps) => state[namespace]

// configureStore.js
import reducer from './counter'
const store = createStore(reducer)
export default store

// Component.js
import { selector } from './counter'
const Component = props => <some markup />
export default connect(selector)(Component)

Так что же у нас есть?Вкратце:

1. Component.js не знает о форме состояния и даже пространстве имен;
2. configureStore.js не знает о пространстве имен счетчика;
3. counter.js - единственное место, которое знает о своем пространстве имен в магазине.

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

Обратите внимание, что namespace должен быть уникальным илиможно повторно использовать из приложения в приложение, его можно импортировать или вводить.

---

IMO, идея повторного использования react-redux вещи (т.е. connect(...)) не очень прочна.Поскольку обычно форма состояния от приложения к приложению не будет одинаковой

Я бы посоветовал вам оставить его явным, поэтому базовый компонент - это тот, у кого должен быть API, который был бы непровереннымнасколько это возможно.