1

Изучаю react-redux. Объясните пожалуйста, как работает этот паттерн (передача store в props дочерних компонентов).

index.js:

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

const store = createStore((state = [], action) => { });

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

App.js:

import { connect } from 'react-redux';

class App extends Component {
  render() { 
    return <div></div>;
  }
}

export default connect(state => ({ testStore: state }), dispatch => ({}))(App);

Особенно непонятна последняя строчка в App.js

1 ответ 1

2

Функция connect обеспечивает "соединение" компонента и хранилища. Она предоставляет обертку над компонентом, который указывается в скобках в конце (Арр в данном случае), предоставляя ему подписку на изменение определенной части хранилища (первый аргумент) и действиям, которые можно вызвать напрямую через props в компоненте App (второй аргумент). Таким образом, предположим, что у нас store состоит из нескольких редьюсеров (объединенных функцией combineReducers)

combineReducers({
  testStore1,
  testStore2
})

например, подписаться на изменение только testStore1 можно следующим образом:

function mapStateToProps(state) {
  return { testStore1: state.testStore1 }
}

export default connect(mapStateToProps)(TodoApp)

чтобы вызывать изменения состояния, необходимо подключить к компоненту действия - actions.

import * as actionCreators from './actionCreators'

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}

с помощью функции bindActionCreators созданные вами действия оборачиваются функцией dispatch, обеспечивающий возможность напрямую вызывать из Арр изменения состояния. Те действия, которые не вошли в actionCreators, соответственно доступны внутри Арр не будут.

export default connect(mapStateToProps, mapDispatchToProps)(App)

ну и в конце создаем оболочку над нашим Арр, таким образом активизируем нашу подписку на изменения хранилища и доступ к изменениям хранилища.

1
  • Спасибо! Очень интересно) 21 ноя 2019 в 18:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.