Никита Гущин

Так примерно и делают.
https://www.npmjs.com/package/react-click-outside

Есть API для работы с children: https://facebook.github.io/react/docs/top-level-ap... . Так как children - это просто props, пробегайте рекурсивно по всему дереву и собирайте элементы:

function getChildren(children) {
  let elements = []
  if (!children) {
    return elements
  }

  React.Children.forEach(children, child => {
    elements = [ ...elements, child, ...getChildren(child.props.children) ]
  })

  return elements
}

Вам нужно слушать componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
  this.setState({ id: nextProps.id })
}

Плюс почитайте как не нужно использовать state: https://facebook.github.io/react/tips/props-in-get...

Если вы их в коннекторе забиндите - а потом передадите, то все окей. Но используйте контекст когда нужно, а не везде.

react-router поддерживает данный функционал из коробки - документация и пример приложения

Зависимостей, как правило нет. Но можно сделать вложенные редьюсеры:

const myReducer = combineReducers({ connectedReducer1, connectedReducer2 })

PS для форм используйте redux-form.

UPD1 При этом вы можете вручную вызывать вложенные редьюсеры:

function combinedReducer(state = initialState, action = {}) {
  switch(action.type) {
    case SOME_COMPLEX_ACTION:
      return {
         ...state,
         someProp: someOtherReducer(state.someProp, { type: OTHER_ACTION, payload: action.payload.something })
      }
    default:
      return {
         ...state,
         someProp: someOtherReducer(state.someProp)
      }
  }
}

Храните тип фильтра в store а не в state. Затем фильтруйте из общего массива по этому фильтру во время mapStateToProps (изменение фильтра - это экшн). При этом не плохо бы использовать reselect.

function mapStateToProps(state) {
  const filter = state.something.filter
  const items = state.other.items
  return {
    items: filterItems(items, filter)
  } 
}
connect(mapStateToProps)(...)

Вам довольно сильно придется поменять структуру. Всю логику перенести в экшен креаторы, хранение стейт в редьюсеры. Компоненты сделать dumb + несколько контроллеров. Продумать селекторы, и т.д.

И в принципе, это другая (более строгая) концепция приложения. Но без redux (flux) никак.

Чтобы передать props из UserHome в NewPatient нужно чтобы последний был дочерним роутом первого:

В camelCase не стоит делать path - т.к. он регистронезависимый

<Router history={hashHistory}>
  <Route path="/" component={UserHome}>
    <Route  path="NewPatient" component={NewPatient}  />
  </Route>
</Router>

Тогда в UserHome надо делать так:

return (
  <div className="UserHome ">
    {this.props.children && React.cloneElement(this.props.children, {
      patientUr: this.state.patient_ur
    })}
  </div>
)

Вам нужно не внутри компонента с интервалом рендерить а снаружи перерисоввывать компонент, передавая разные props
Самый упрощенный вариант:

class MyContainer extends Component {
  constructor() {
    this.state = { nums: [] }
  }
  
  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState({
        nums: [
          ...this.state.nums,
          (this.state.nums[this.state.nums.length-1] || 0) + 1
        ],
      })
    }, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.intervalId)
  }

  render() {
    retrurn (
      <div>
       {this.state.nums.map((n, i) => (<b key={i}>Number is: {n}</b>)}
      </div>
    )
  }
}

Насколько я понял, у вас есть две сущности (одна - root и одна в elements). Тогда это дело лучше хранить в нормализованном состоянии: делам два редьюсера, каждый работает со своей сущностью, а в селекторе денормализуем. При этом хранить сущности удобнее как { id: entity } объект, а не как массив.

// rootEntity reducer
const initialState = {
  entities: {}
}

function rootEntityReducer(state = initialState, action = {}) {
  switch(action.type) {
    case ADD_ELEMENT:
      const { targetEntityId, element } = action.payload
      const targetEntity = state.entities[targetEntityId]
      return {
        ...state,
        entites: {
          ...state.entities,
          [targetEntityId]: { ...targetEntity, elements: [ ...targetEntity.elements, element ] }
        }
      }
    default:
      return state
  }
}

UPD1 если entities - массив

// rootEntity reducer
const initialState = {
  entities: []
}

function rootEntityReducer(state = initialState, action = {}) {
  switch(action.type) {
    case ADD_ELEMENT:
      const { targetEntityId, element } = action.payload

      return {
        ...state,
        entites:  state.entities.map(
          entity => entity.id !== targetEntityId
            ? entity
            : { ...entity , elements: [ ...entity.elements, element ] }
        )
      }
    default:
      return state
  }
}

С redux'ом это будет выглядеть вот так:
erikras.github.io/redux-form/#/examples/deep?_k=3m09yp

UPD1. Примерно так будет выглядеть. Но я бы фильтр списка работников поместил в select. Тогда вам нужно будет получать из стора значения формы и тоже самое делать + можно использовать reselect для оптимизации всего этого дела

UPD2. Я обновил код немного. Старая версия не работала...

class MyForm extends Component {
  render() {
    const { handleSubmit, fields: { workers }, workersList } = this.props
    const selectedWorkersIds = workers.map(workerField => workerField.value.id)
    const finalWorkersList = workersList.filter(
      worker => selectedWorkersIds.indexOf(worker.id) === -1
    )
    return (
      <form onSubmit={handleSubmit}>
        <WorkersMultiInput
          field={workers}
          workersList={finalWorkersList}
          />
      </form>
    )
  }
}

class WorkersMultiInput extends Component {
  render() {
    const { field, workersList } = this.props

    return (
      <div>
        {
           field.map((workerField, i) => {
             // Просто добавим в список выбранного воркера 
             const finalWorkerList = [ workerField.value, ...workersList ]            
             return (
               <WorkerInput key={i} field={workerField} workersList={finalWorkersList} />
             )
           }
        }
      </div>
    )
  }
}

Первый и второй вариант очень похожи. Преимущества перед третьим вариантом в том, что у вас метод будет забинден на this:

class ... {
  consoleLog = () => { 
    //Второй вариант объявления
    console.log('Второй вариант');
  }

  render() {
     return (
       <button onClick={this.consoleLog} type="button"> click me </button>
     )
  }
}

В первом и втором случае вы не потеряете this при передаче метода как callback в onClick.

https://github.com/erikras/react-redux-universal-h...