Я не понимаю, как работает функция подключения в редукции

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

Функция подключения, я не понимаю (items) => items, PostListActions

export default connect((items) => items, PostListActions)(PostListContainer);
import React from 'react';
import {connect} from 'react-redux';
import {PostList} from '../../../components/PostList';
import PostListActions from "./../actions";

export class PostListContainer extends React.Component {

    componentWillMount() {
        const {fetchItems} = this.props;
        fetchItems();
    }

    render() {
        const {fetchRemoveItem} = this.props;
        return <PostList posts = {this.props.posts.items} onRemove = {fetchRemoveItem}/>;
    }

}


export default connect((items) => items, PostListActions)(PostListContainer);
import {postApi} from './../../utils/api';

const PostListActions = {
    setItems: (items) => ({
        type: 'POSTS:SET_ITEMS',
        payload: items
    }),

    removeItems: (id) => ({
        type: 'POSTS:REMOVE_ITEM',
        payload: id
    }),

    fetchItems: () => dispatch => {
        postApi.getNotes().then(({data}) => {
            dispatch(PostListActions.setItems(data));
        });
    },

    fetchRemoveItem: (id) => dispatch => {
        dispatch(PostListActions.removeItems(id));
        postApi.deleteNote(id);
    }

};

export default PostListActions;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
203
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пожалуйста, сначала прочитайте документы: https://react-redux.js.org/api/connect

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

connect(mapStateToProps, mapDispatchToProps)(Component)

Здесь

  1. connect — это функция, которая соединяет ваш redux с вашим компонентом и добавляет ваши redux state и actions/dispatch в реквизиты вашего компонента.

  2. где mapStateToProps — это функция, которая дает вам state as an argument, и вы можете получить доступ к all redux state оттуда, и вы можете получить к ней доступ, используя this.props.stateName

  3. где mapDispatchToProps — это функция, которая помогает вам называть ваши действия как this.props.actionName

Другие вопросы по теме