mapStateToProps для функционального компонента

Question

Существует ли какая-либо функция, аналогичная mapStateToProps, чтобы мы могли подключить состояние Redux к функциональному компоненту в React?

Является ли передача состояния в качестве подпорок от родительского компонента единственным решением?

Answer 1

Сначала вы должны connect добавить компонент в хранилище.

Соединение происходит с использованием connect HOC, предоставляемого пакетом react-redux.Первый требуемый параметр - это метод, который, учитывая глобальное хранилище, возвращает объект только с теми свойствами, которые вам нужны в этом компоненте.

Например:

import connect from 'react-redux'

const HelloComponent = ({ name }) =>
    <p>{ name }</p>

export default connect(
    globalState => ({ name: globalState.nestedObject.innerProperty })
)(HelloComponent)

Для повышения читабельностиОбычно используется метод mapStateToProps, например:

const mapStateToProps = state => ({
    name: state.nestedObject.innerProperty
})

export default connect(mapStateToProps)(HelloComponent)

Answer 2

Вы определенно можете использовать mapStateToProps с функциональным компонентом так же, как с компонентом класса.

function MyComponent({ propOne }) {
  return <p>{propOne}</p>
}

function mapStateToProps(state) {
  return { propOne: state.propOne };
} 

export default connect(mapStateToProps)(MyComponent);