Я пытаюсь понять, как работает 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;
Пожалуйста, сначала прочитайте документы: https://react-redux.js.org/api/connect
Я дам вам базовые знания о редуксе, чтобы вы могли правильно его понять.
connect(mapStateToProps, mapDispatchToProps)(Component)
Здесь
connect — это функция, которая соединяет ваш redux
с вашим компонентом и добавляет ваши redux state
и actions/dispatch
в реквизиты вашего компонента.
где mapStateToProps
— это функция, которая дает вам state as an argument
, и вы можете получить доступ к all redux state
оттуда, и вы можете получить к ней доступ, используя this.props.stateName
где mapDispatchToProps
— это функция, которая помогает вам называть ваши действия как this.props.actionName