Начало работы с Expo React Native Redux

Простое объяснение представления, действия, сохранения, состояния и редуктора.

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

Поток данных

Упрощенным объяснением является представление, содержащее кнопку для отправки действия.

Редьюсер внутри хранилища решает, как обновить состояние (источник правды) на основе действия и текущего состояния.

Пользовательский интерфейс перерисовывается на базе последнего состояния.

Вид → Действие

Во-первых, внутри представления будет кнопка для запуска создателя действия.

const ComponentA = () => {
const dispatch = useDispatch();
return (
<View>
<Button title="+5" onPress={()=>dispatch(increment(5))}/>
</View>
)
}

Создатель действия — это функция, которая создает и возвращает объект действия.

Действие содержит поле типа, которое обычно представляет собой описательное имя, здесь «ИНКРЕМЕНТ», так как мы хотим увеличить значение.

Другое поле — это полезная нагрузка, которая представляет собой дополнительную информацию, здесь «число», представляющее число, которое мы хотим добавить.

export const increment = (num=1) => {
return {
type:'INCREMENT',
payload:num
}
}

Действие → Магазин

Store создается путем передачи редьюсера. Здесь мы назвали редюсер «counterReducer».

Редуктор решает, как обновить состояние.

Правила редуктора

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

export const counterReducer = (state=0, action) =>{
switch (action.type) {
case 'INCREMENT':
return state + action.payload;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}

Магазин → Посмотреть

После обновления состояния пользовательский интерфейс будет повторно отображаться на основе нового состояния.

Селекторы — это функции для извлечения определенных фрагментов информации из значения состояния хранилища. Здесь, поскольку мы используем реакцию, используйте useSelector() для извлечения определенных данных из состояния хранилища Redux.

const ComponentA = () => {
const counter = useSelector(state => state);
return (
<View>
<Text>ComponentA {counter}</Text>
</View>
)
}

Начать проект

Чтобы использовать Redux, нам нужно установить следующие пакеты.

npm install redux react-redux

Действие, редуктор и магазин

Создайте папку «store», внутри папки создайте action.js, reducer.js и store.js.

Внутри action.js мы создаем две функции, одна — инкрементная, а другая — декрементная.

export const increment = () => {
return {
type:'INCREMENT',
}
}
export const decrement = () => {
return {
type:'DECREMENT'
}
}

Внутри reducer.js мы устанавливаем начальное состояние равным 0, а также передаем действие редюсеру. Если тип INCREMENT, состояние будет увеличено на 1. Если тип «DECREMENT», состояние будет уменьшено на 1. В противном случае будет возвращено текущее состояние.

export const counterReducer = (state=0, action) =>{
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}

Теперь можно переходить к созданию магазина.

Внутри store.js нам нужно импортировать createStore из только что созданного redux и counterReducer.

import {createStore} from 'redux';
import {counterReducer} from './reducer';
const store = createStore(counterReducer);
export default store;

Компонент А

Внутри компонента A мы добавим две кнопки для увеличения и уменьшения значения. Импортируйте приращение и уменьшение из действия. Импортируйте useSelector и useDispatch из «React-Redux». Один для получения состояния из хранилища. Другой предназначен для отправки действия и обновления состояния.

import React from 'react'
import { View, Text, Button } from 'react-native'
import {useSelector, useDispatch} from 'react-redux'
import {increment,decrement} from '../store/action'
const ComponentA = () => {
const counter = useSelector(state => state);
const dispatch = useDispatch();
return (
<View>
<Text>ComponentA {counter}</Text>
<Button title="+" onPress={()=>dispatch(increment())}/>
<Button title="-" onPress={()=>dispatch(decrement())}/>
</View>
)
}
export default ComponentA

Компонент Б

Далее мы также создаем еще один компонент. Этот компонент просто отображает состояние. Это просто для того, чтобы показать, что оба компонента A и B имеют одинаковое значение.

import React from 'react'
import { View, Text } from 'react-native'
import {useSelector} from 'react-redux'
const ComponentB = () => {
const counter = useSelector(state => state);
return (
<View>
<Text>ComponentB {counter}</Text>
</View>
)
}
export default ComponentB

App.js

Наконец, нам нужно импортировать компонент A и компонент B в App.js. Импортируйте провайдер из «реагировать-редукс», оберните эти два компонента провайдером и сделайте хранилище избыточности доступным для этих двух компонентов.

import React from 'react';
import { StyleSheet } from 'react-native';
import ComponentA from './components/ComponentA';
import ComponentB from './components/ComponentB';
import {Provider} from 'react-redux';
import store from './store/store'
export default function App() {
return (
<Provider store={store}>
<ComponentA/>
<ComponentB/>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Теперь, если вы протестируете приложение, значение можно изменить на 1, нажав кнопку «+» или «-».

Полезная нагрузка в действии

Чтобы приращение можно было настроить, нам нужно внести некоторые изменения в создателя действия.

В action.js мы добавляем параметр и устанавливаем значение по умолчанию равным 1, поэтому, если в функции нет передачи значения, предполагается, что значение увеличивается на 1.

export const increment = (num=1) => {
return {
type:'INCREMENT',
payload:num
}
}

Вернемся к App.js, мы изменим с +1 на +5, а затем передаем значение 5 в функцию, вы должны увидеть, что значение увеличивается на 5.

import React from 'react'
import { View, Text, Button } from 'react-native'
import {useSelector, useDispatch} from 'react-redux'
import {increment,decrement} from '../store/action'
const ComponentA = () => {
const counter = useSelector(state => state);
const dispatch = useDispatch();
return (
<View>
<Text>ComponentA {counter}</Text>
<Button title="+5" onPress={()=>dispatch(increment(5))}/>
<Button title="-" onPress={()=>dispatch(decrement())}/>
</View>
)
}
export default ComponentA