Как не передать реквизит с помощью Redux?

Question

Я только что узнал, что мы можем уменьшить сложность реактивного проекта, используя Redux. С единственным источником правды (хранилищем) нам не нужно передавать состояния компонентам, которые в них не нуждаются. Я борюсь с пониманием этого утверждения.

Скажем, у меня есть три компонента, A, B и C. A - это контейнер с состоянием, называемым text. B - это пользовательская кнопка, а C отображает только текст. Всякий раз, когда нажимается B, он обновляет состояние в A. Затем C отображает обновленный текст.

  A
 / \
C   B

Я попытался применить редукс к приложению и обнаружил, что мне все еще нужно передать реквизит. Разница лишь в том, что я передаю this.props.text вместо this.state.text.

Я не могу понять, как излишняя польза может принести пользу подобному приложению.

App.js

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

import MyButton from "./MyButton";
import { handleClick } from "./actions"; 
import Display from "./Display"

class App extends Component {
  render() {
    return (
      <div className="App">
        <MyButton onClick={()=>this.props.handleClick(this.props.text)} />
        <Display text={this.props.text} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
    text: state.text.text
})

const mapDispatchToProps = dispatch => ({
  handleClick: (text) => dispatch(handleClick(text))
})

export default connect(mapStateToProps, mapDispatchToProps)(App)

Кроме того, если у нас есть другое приложение со структурой, показанной ниже. Скажем, B не заботится о состоянии A, но C нуждается в нем для отображения текста. Можем ли мы пропустить B и просто позволить C использовать состояние A?

A
|
B
|
C

Answer 1

Я думаю, что нашел решение. Я просто создал файл stores.js и экспортировал магазин. Поэтому я могу импортировать его и получить состояние, вызывая store.getState () всякий раз, когда это требуется дочернему компоненту.

Вы не должны этого делать.

Вместо этого вы должны использовать функцию соединения с каждым компонентом, повсюду в структуре, которому требуется доступ к свойству вашего магазина.

Но, если у вас всего три компонента, вам, вероятно, не нужен Redux или глобальное хранилище для состояния вашего приложения.

Redux предлагает множество мнений о том, как обращаться с вашим глобальным состоянием, которые предназначены для защиты вашего потока данных.

В противном случае, если вам нужно всего лишь избежать реквизита реквизита (т. Е. Пропустить реквизит через множество уровней, как в вашем втором примере), вы можете использовать собственный контекстный API-интерфейс React, который делает именно это: actjs.org/docs/context.html

Редактировать Все должно быть яснее с примером:

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

import MyButtonCmp from "./MyButton";
import DisplayCmp from "./Display"

import { handleClick } from "./actions"; 

// I am doing the connect calls here, but tehy should be done in each component file
const mapStateToProps = state => ({
    text: state.text.text
})
const Display = connect(mapStateToProps)(DisplayCmp)

const mapDispatchToProps = dispatch => ({
  onClick: (text) => dispatch(handleClick(text))
})
const MyButton =  connect(null, mapDispatchToProps)(MyButtonCmp)

class App extends Component {
  render() {
    return (
      <div className="App">
        {/* No need to pass props here anymore */}
        <MyButton />
        <Display />
      </div>
    );
  }
}

// No need to connect App anymore
// export default connect(mapStateToProps, mapDispatchToProps)(App)

export default App

Answer 2

В этом примере вы можете сопоставить состояние приложения с реквизитами, используя redux.

Я не понимаю, почему вы обработали бы информацию таким образом (с помощью redux), если вы не планировалиоб использовании данных в нескольких частях приложения и хотел повторно использовать код действия.

Подробнее: https://react -redux.js.org / using-реагировать-редукс / connect-mapstate

2-й вопрос

Кроме того, если у нас есть другое приложение со структурой, показанной ниже. Скажем, B не заботится о состоянии A, но C нуждается в нем для отображения текста. Можем ли мы пропустить B и просто позволить C использовать состояние A?

В Redux - да.

С React Hooks - да.