Как отправить действия из дочерних компонентов на три уровня вниз?

В настоящее время я сталкиваюсь с этой проблемой при разработке приложения React, и я, похоже, не могу найти ответ на него.

Итак, мое приложение имеет следующую иерархию компонентов в React Router

App - > Динамическийконтейнер - > → LoginComponent

Теперь, LoginComponents имеет элементы формы для ввода имени пользователя и пароля.

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

Как мне это сделать? Любое предложение будет оценено.

Ответ 1

Один из вариантов - привязать свои одноцелевые формы к их действиям с помощью connect. Поскольку <LoginComponent /> обычно всегда делает то же самое, вы можете использовать его следующим образом:

import React from 'react';
import * as userActionCreators from '../actions/users';
import { connect } from 'react-redux';

export class LoginComponent extends React.Component {
   static propTypes = {
     login: React.PropTypes.func.isRequired
   }

   render() { 
     const { login } = this.props;
     const { username, password } = this.state;

     return (
       <form onSubmit={ () => login(username, password) }>
         ...
       </form>
     );
   }
}

export default connect(null, userActionCreators)(LoginComponent);

connect автоматически связывает создателя действия и отдельно предоставляет dispatch до props, поэтому, если вы хотите быть более явным, приведенный выше пример совпадает с

import React from 'react';
import { login } from '../actions/users';
import { connect } from 'react-redux';

export class LoginComponent extends React.Component {
   static propTypes = {
     dispatch: React.PropTypes.func.isRequired
   }

   render() { 
     const { login, dispatch } = this.props;
     const { username, password } = this.state;

     return (
       <form onSubmit={ () => dispatch(login(username, password)) }>
         ...
       </form>
     );
   }
}

export default connect()(LoginComponent);

И для справки, userActionCreators:

const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGIN_FAILED = 'LOGIN_FAILED';

export function login(username, password) {
  if (username === 'realUser' && password === 'secretPassword') {
    return { type: LOGIN_SUCCESS, payload: { name: 'Joe', username: 'realUser' } };
  } else {
    return { type: LOGIN_FAILED, error: 'Invalid username or password };
  }
}

Ответ 2

если я правильно понял вас, если вы читаете Пример: Todo List | Redux вы найдете пример, который вы, возможно, ищете.

Здесь приложение, connect() ed для Redux, а затем есть другие компоненты: AddTodo, TodoList, Тодо и Нижний колонтитул.

Приложение вызывает TodoList, который вызывает Todo, где пользователь может нажать что-нибудь. Этот щелчок будет возвращать обратный вызов после обратного вызова, от Todo до TodoList до App, как описано ниже:

Приложение вызывает TodoList с <TodoList todos={visibleTodos} onTodoClick={ index => dispatch(completeTodo(index)) } />
TodoList вызывает Todo с <Todo {...todo} key={index} onClick={ () => this.props.onTodoClick(index) } />
Компонент Todo имеет свойство <li> с onClick={this.props.onClick}.

Итак, назад, когда кто-то нажимает внутри компонента Todo, который вызовет this.props.onClick, который вызовет this.props.onTodoClick(index) из TodoList (обратите внимание на необязательный добавленный параметр index), то, наконец, это вызовет функцию dispatch(completeTodo(index)) из App.

Ответ 3

Два варианта:

Передайте связанный actionCreator из Контейнера (который подключен к Redux) до дочернего компонента (который не подключен к Redux) через объект props.
Подумайте о принятии "Реагировать компонентный контекст" в вашем проекте.