В этом посте мы увидим интеграцию Redux в ReactJS.
Давайте рассмотрим пример, как получение данных из jsonplaceholder (бесплатный онлайн-поставщик REST API для поддельных остальных). При выборке отображать текст как выборка, после получения данных отображать его в листинге.
Живая демонстрация примера.
Мы увидим вышеприведенный пример с состоянием реакции, а затем с состоянием редукции. управление.
Примечание. Вы можете поиграть с ним на StackBlitz. В вашем браузере. Создавайте, редактируйте и развертывайте приложения с полным стеком — всего одним щелчком мыши. Онлайн-редактор кода VS, оперативное развертывание.
Просмотреть код и/или отредактировать и просмотреть предварительный просмотр приведенного выше примера.
В приведенном выше примере на основе флага isFetching мы показываем/обновляем/изменяем пользовательский интерфейс. Не беспокойтесь ни о каких редукционных терминах. Мы пойдем один на один, я объясню все термины. Если какие-либо данные или действия изменяют пользовательский интерфейс, они будут рассматриваться как избыточные действия. Таким образом, с точки зрения сокращения, isFetching будет нашим actionCreator. При вызове getUsers снова меняется пользовательский интерфейс. Таким образом, с точки зрения сокращения, getUsers будет нашим действием сокращения, и мы должны отправить/запустить это действие getUsers.
Теперь давайте начнем с Redux.
Чтобы использовать Redux, нам нужно запустить «npm install redux», а чтобы использовать его, мы должны
import * as Redux from ‘redux’;
В Redux существует только 1 глобальное хранилище уровня приложения, которое считается единым источником достоверной информации. Создайте хранилище избыточности, используя,
const store = Redux.createStore(reducer);
По сути, редьюсер предназначен для каждой страницы, что означает, что для управления любой страницей с помощью редукса вам нужно написать 1 редьюсер. Редуктор, как показано ниже,
const reducer = (state = { users: [], isFetching: false }, action) => {
switch (action.type) {
case ActionTypes.STARTED_UPDATING:
return { ...state, isFetching: true, users: [] };
case ActionTypes.UPDATED:
return { ...state, isFetching: false, users: action.payload };
default:
return state;
}
};
По сути, состояние (первый параметр редуктора) является держателем состояния для полного приложения. Теперь давайте попробуем разобраться с редьюсером.
1. редуктор просто повторно отображает пользовательский интерфейс. И в реакции для повторного рендеринга пользовательского интерфейса есть только 2 правила, 1 — изменение состояния (с помощью setState()) или изменение реквизита.
2. Если вы посмотрите на код редуктора, мы в конце , возвращая новый объект для каждого actionCreator. И если какой-либо из actionCreator запускается диспетчером действий, то пользовательский интерфейс повторно отображается с новыми обновленными данными, возвращаемыми редюсером.
3. Для любого экрана есть некоторое взаимодействие с пользователем (в терминах сокращения, которые являются действиями) . Итак, чтобы справиться с этим взаимодействием с пользователем, мы пишем избыточные действия. А с помощью действия redux мы можем обновить пользовательский интерфейс.
Чтобы использовать написанный выше редуктор, давайте посмотрим на синтаксис ниже.
const ConnectedApp = connect(
(state) => {
return { ...state };
},
(dispatch) => {
return {
update: () => {
dispatch({
type: ActionTypes.STARTED_UPDATING
});
getUsers()
.then(users => dispatch({
type: ActionTypes.UPDATED,
payload: users
}));
}
};
})(App);
Мы использовали подключение. connect импортируется из «react-redux» (это означает, что мы должны сначала установить,
“npm install react-redux” connect((state) => (…), (dispatch) => (…)).
connet — это функция (HOC — функция высшего порядка), которая принимает 2 аргумента. Оба аргумента являются функциями.
Argument 1. (state) => {
return { …state };
},
Здесь мы получаем состояние уровня приложения из первого аргумента.
Argument 2. (dispatch) => {
dispatch({
type: ActionTypes.STARTED_UPDATING,
})
}
И из второго аргумента (который является функцией, получающей отправку действия от этой функции) мы можем отправить необходимый actionCreator для обновления пользовательского интерфейса.
import React from 'react';
import ReactDOM from 'react-dom';
import * as Redux from 'redux';
import { Provider, connect } from 'react-redux';
const ActionTypes = {
STARTED_UPDATING: 'STARTED_UPDATING',
UPDATED: 'UPDATED'
};
const getUsers = () => {
return new Promise((resolve) => {
return setTimeout(() => {
return resolve(fetch('https://jsonplaceholder.typicode.com/users').then((res) => {
return res.json()
}).then((data) => {
return data
}));
}, 2000);
});
};
class App extends React.Component {
render() {
return (
<div>
<button disabled={this.props.isFetching} onClick={this.props.update}>Fetch users</button>
{this.props.users.length ? (<ol>
{this.props.users.map((user) => {
return <li key={user.id}>{user.username}</li>
})}
</ol>)
: this.props.isFetching ? <div>Fetching...</div> : null
}
</div>
);
}
}
const reducer = (state = { users: [], isFetching: false }, action) => {
switch (action.type) {
case ActionTypes.STARTED_UPDATING:
return { ...state, isFetching: true, users: [] };
case ActionTypes.UPDATED:
return { ...state, isFetching: false, users: action.payload };
default:
return state;
}
};
const store = Redux.createStore(reducer);
const ConnectedApp = connect(
(state) => {
return { ...state };
},
(dispatch) => {
return {
update: () => {
dispatch({
type: ActionTypes.STARTED_UPDATING
});
getUsers()
.then(users => dispatch({
type: ActionTypes.UPDATED,
payload: users
}));
}
};
})(App);
class Main extends React.Component {
render() {
return <Provider store={store}><ConnectedApp /></Provider>;
}
}
ReactDOM.render(<Main />, document.getElementById('root'));
Используемые термины,
Поставщик, соединение, сокращение, реакция-восстановление, хранилище, редуктор, отправка, actionCreators.
1. Провайдер: этот компонент обеспечивает резервное хранилище в качестве реквизита.
<Provider store={store}>
<ConnectedApp />
</Provider>;
2. connect: для подключения вашего приложения к redux.
connect(mapStateToPropsFun, mapDispatchToPropsFun)
3. redux: вам нужно npm установить redux.
4. react-redux: чтобы использовать redux с react, вам нужно npm установить react-redux
5. store: это единственный источник достоверной информации, полный магазин приложений, созданный
const store = Redux.createStore(reducer);
6. редуктор: редуктор зависит от состояния страницы.
7. actionCreators: уникальный тип действия для возврата данных нового редуктора
8. диспетчеризация: чтобы обновить данные конкретного редуктора хранилища избыточности, вам необходимо вызвать/отправить actionCreators.
Дайте комментарии. Любые типы комментариев всегда приветствуются. Не забудьте похлопать, если вы что-то поняли из этого поста.
