freeCodeCamp

5.4 KiB

Raw Blame History

id	title	challengeType	isRequired	forumTopicId	localeTitle
5a24c314108439a4d4036147	Connect Redux to React	6	false	301426	Подключите Redux к действию

Description

Теперь, когда вы написали функции mapStateToProps() и mapDispatchToProps() , вы можете использовать их для отображения state и dispatch в props одного из ваших компонентов React. Метод connect из React Redux может справиться с этой задачей. Этот метод принимает два необязательных аргумента: mapStateToProps() и mapDispatchToProps() . Они являются необязательными, потому что у вас может быть компонент, которому нужен только доступ к state но ему не нужно отправлять какие-либо действия или наоборот. Чтобы использовать этот метод, передайте функции в качестве аргументов и немедленно вызовите результат с вашим компонентом. Этот синтаксис немного необычен и выглядит так: connect(mapStateToProps, mapDispatchToProps)(MyComponent) Примечание. Если вы хотите опустить один из аргументов метода connect , вы передаете null на свое место.

Instructions

Редактор кода имеет функции mapStateToProps() и mapDispatchToProps() и новый компонент React, называемый Presentational . Подключите этот компонент к Redux с помощью метода connect из глобального объекта ReactRedux и немедленно вызовите его на компоненте Presentational . Назначьте результат новой const называемой ConnectedComponent которая представляет подключенный компонент. Вот и все, теперь вы подключены к Redux! Попробуйте изменить либо из connect аргументов «s к null и наблюдать за результатами испытаний.

Tests

tests:
  - text: The <code>Presentational</code> component should render.
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })());
  - text: The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find('Presentational').props(); return props.messages === '__INITIAL__STATE__'; })());
  - text: The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find('Presentational').props(); return typeof props.submitNewMessage === 'function'; })());

Challenge Seed

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message));
    }
  }
};

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h3>This is a Presentational Component</h3>
  }
};

const connect = ReactRedux.connect;
// change code below this line

After Tests

const store = Redux.createStore(
  (state = '__INITIAL__STATE__', action) => state
);
class AppWrapper extends React.Component {
  render() {
    return (
      <ReactRedux.Provider store = {store}>
        <ConnectedComponent/>
      </ReactRedux.Provider>
    );
  }
};
ReactDOM.render(<AppWrapper />, document.getElementById('root'))

Solution

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message));
    }
  }
};

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h3>This is a Presentational Component</h3>
  }
};

const connect = ReactRedux.connect;
// change code below this line

const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);

5.4 KiB Raw Blame History Unescape Escape