Redux: нужны пояснения по базовой настройке

Question

Я новичок в Redux, и после просмотра нескольких уроков у меня все еще есть несколько вопросов:

1) После создания моего store у меня есть:

ReactDOM.render(<Provider store={store}><BrowserRouter><App/></BrowserRouter></Provider>, document.getElementById('root'));

Переходя к компоненту App, я определяю:

function mapStateToProps(state) {
    return {
        posts: state.posts,
        comments: state.comments 

    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(actions, dispatch)

}

Откуда state и dispatch? Это автоматически относится к состоянию и диспетчеризации store, так как я подключил его к своему компоненту?

2) Один из моих компонентов React имеет форму, которая при отправке вызывает функцию:

handleSubmit(event) { ... }

Итак, в конструкторе этого компонента у меня есть:

constructor() {
    super()
    this.handleSubmit = this.handleSubmit.bind(this);
}

Всегда ли необходимо вызывать super() при объявлении компонента класса React? Почему мне нужно сделать этот тип привязки там?

3) После отправки этой формы я отправляю действие под названием addPost. Как это «пойдет» на редуктор? Это просто потому, что редуктор был задан, когда я создал хранилище и, используя mapDispatchToProps(dispatch), я "дал" Redux знать, какие действия можно отправить этому редуктору?

4) Редуктор просто возвращает объект state - где логика, которая фактически "сохраняет" это состояние в хранилище? Это скрыто?

Извините за длинный пост и спасибо!

Answer 1

1. Да, обрабатывайте state и dispatch как ссылки на ваше состояние притока и функцию отправки соответственно.

2. Реагируют на документы говорят:

   Если вы не инициализируете состояние и не привязываете методы, вам не нужно реализовывать конструктор для компонента React.

Попробуйте использовать функцию стрелки для вашего обработчика:

class MyComponent extends Component {
    handleSubmit = () => {
        // ...
    }
}

3. Редуктор был передан хранилищу, хранилище было передано компонентуact-redux <Provider>, а компонент Provider предоставляет контекст React , где выбираются отправленные действия в компонентах-потомках на указанные редукторы.

4. Эта логика находится в библиотеке приставок.

Answer 2

Откуда поступают состояние и отправка? Относится ли это автоматически к состоянию и отправке магазина, так как я подключил его к своему компоненту?

State - одна из самых трудных для понимания тем, которая стоит впереди и в центре, когда мы начинаем концентрироваться на Redux. Каждый основанный на классе компонент, который мы определяем, имеет свой собственный объект состояния.

mapStateToProps - наша способность взаимодействовать от состояния уровня приложения до уровня компонента. Это где мы отбираем свойства у нашего объекта состояния и внедряем их в наши компоненты.

dispatch - это то, как вы изменяете состояние в вашем приложении, вы dispatch действие.

В вашей реализации вы используете bindActionCreators, который превращает объект, значения которого являются создателями действий, в объект с теми же ключами, но с каждым создателем действий, обернутым в вызов dispatch, чтобы их можно было вызывать напрямую .

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

Всегда ли необходим вызов super () при объявлении компонента класса React? Зачем мне там делать этот тип привязки?

Да, компоненты React всегда должны вызывать super в своих конструкторах для правильной настройки.

Для более подробного объяснения такого рода хитрости связывания, начните с React docs . Если вы не очень склонны, просто знайте, что в React, когда вы определяете обработчик событий, который использует this, вам нужно добавить this.methodName = this.methodName.bind(this) к вашей функции constructor.

Answer 3

1. Пожалуйста, ознакомьтесь с нашими новыми официальными документами React-Redux . В частности, вы должны прочитать connect: извлечение данных с помощью mapStateToProps и connect: отправка действий с помощью mapDispatchToProps.

2. Если вы определяете constructor для класса, и , это расширяет другой класс, тогда да, вам нужно вызвать super() в качестве первой строки конструктор - так определяются классы ES6 для работы.

3. Redux имеет только одну функцию редуктора. Внутренности dispatch() выглядят так:

   function dispatch(action) {
       newState = rootReducerFunction(oldState, action);
       subscriberCallbacks.forEach(callback => callback() );
   }
   

Возможно, вы захотите прочитать страницу Structuring Reducers в документации Redux, чтобы лучше понять, как и почему редукторы обычно делятся на более мелкие функции.

4. В большинстве случаев логика, которая объединяет различные «срезы состояний» вместе, находится в combineReducers(), потому что вы использовали ее для генерации функции «корневого редуктора».