React / Redux Запустить изменение состояния другого компонента

Question

У меня есть 2 компонента.Не родитель-ребенок.Один компонент имеет состояние, управляемое Redux.Второй компонент имеет кнопку.Как запустить изменение состояния первого компонента, нажав кнопку во втором компоненте?

Answer 1

Ниже приведено запрашиваемое вами решение, в котором один компонент (Компонент1) имеет кнопку, которая изменяет состояние, в то время как второй компонент (Компонент2) поглощает эти изменения.

Компонент1 здесь имеет кнопку, а Компонент2 показываетзначение изменилось из-за нажатия кнопки.Кнопка Component1 отправляет действие по нажатию кнопки через mapDispatchToProps, которое, в свою очередь, увеличивает состояние на 1, которое мы получаем в Component2, используя mapStateToProps.

Component1.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'

import { incrementAction } from './actions/action'
import Component2 from './Component2'

class Component1 extends Component {  
   render() {
     return (
       <div>
        <Component2/>
        <button onClick = { this.props.increment }> Increase </button>
      </div>
     )
   }
}

const mapDispatchToProps = dispatch => ( {
  increment: () => dispatch( incrementAction() )
} )
const mapStateToProps = ( state ) => ( {
  value: state
} )
export default connect( mapStateToProps, mapDispatchToProps )( Component1 )

Component2.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Component2 extends Component {
  render() {
    const { value } = this.props
    return (
      <h1> { value } </h1>
    )
  }
}

const mapStateToProps = ( state ) => ( {
  value: state
} )

export default connect( mapStateToProps, null )( Component2 )

В файле actions.js мы определяем одно действие с типом действия INCREMENT_ONE

actions.js

const INCREMENT_ONE = 'INCREMENT_ONE'

const incrementAction = () => ( { type: INCREMENT_ONE } )

export { incrementAction, INCREMENT_ONE }

В reducer.js мы определяем значение по умолчанию для состояния = 0, т.е. начальное состояние.При каждом нажатии кнопки состояние увеличивается на 1, что затем отображается в Компоненте 2.

reducer.js

import { INCREMENT_ONE } from '../actions/action'

const incrementReducer = ( state = 0, action ) => {
  switch ( action.type ) {
    case INCREMENT_ONE: return state + 1
    default: return state 
  }
}

export default incrementReducer

Надеюсь, это поможет.Если у вас есть какие-либо сомнения, не стесняйтесь спрашивать:)