React Native Redux | Как использовать Redux в React Native

Пример Redux для React Native | Как использовать Redux в React Native — главная тема сегодняшнего дня. Redux — это отдельная библиотека управления состоянием, которую можно использовать с любой библиотекой или фреймворком. Если вы являетесь разработчиком React , значит, вы использовали библиотеку Redux с React .

Обзор примера React Native Redux

  • Шаг 1: Установите React Native на Mac.
  • Шаг 2: Добавьте TextBox и кнопку.
  • Шаг 3: Определите состояние и обработчик ввода.
  • Шаг 4: Создайте папку действий, редукторов и компонентов.
  • Шаг 5 : Создайте функцию Reducer.
  • Шаг 6: Создайте магазин Redux.
  • Шаг 7. Передайте магазин в приложение React Native.
  • Шаг 8. Подключите приложение React Native к магазину Redux.

Учебное пособие по использованию React Native Redux

Основное использование Redux заключается в том, что мы можем использовать одно состояние приложения в качестве глобального состояния и очень легко взаимодействовать с состоянием из любого компонента реакции, независимо от того, являются ли они братьями и сестрами или родительско-дочерними. Теперь давайте начнем React Native Redux Example Tutorial , сначала установив React Native на Mac .

Мы начинаем наш проект установив React Native CLI глобально на Mac. Вы можете пропустить следующую команду, если она уже установлена.

# Шаг 1. Установите React Native.

Введите следующую команду.

 npm install -g react-native-cli 

Хорошо, теперь для создания нового приложения введите следующую команду.

 react-native init rncreatecd rncreate 

Теперь, после установки, нам нужно открыть это приложение в двух разных

Для тестирования в симуляторе iOS введите следующую команду.

 react-native run-ios 

Если вы настроили XCode , появится одно устройство iOS , а также запустится сервер разработки.

Чтобы открыть проект внутри Android Simulator введите следующую команду.

 react-native run-android 

Установите redux и react-redux с помощью следующей команды.

 yarn add redux react-redux # ornpm install redux react-redux -  save 

# Шаг 2. Добавьте текстовое поле и кнопку в App.js.

Хорошо, мы добавим текст поле и кнопку для добавления мест. Итак, давайте добавим кнопки TextInput и . Также мы добавим макет flexbox. Напишите следующий код внутри файла App.js .

//App. jsimport React, {Component} из 'react'; импорт {StyleSheet, View, TextInput, Button} из 'react-native'; экспорт класса по умолчанию. Приложение расширяет Component {placeSubmitHandler = () => {console.log ("Отправлено")  ;} render () {return (     );  }} const styles = StyleSheet.create ({container: {paddingTop: 30, justifyContent: 'flex-start', alignItems: 'center',}, inputContainer: {flexDirection: 'row', justifyContent: 'space-between',  alignItems: 'center', width: '100%'}, placeInput: {width: '70% '}, placeButton: {width: '30%'}, listContainer: {width: '100%'}}); 

# Шаг 3. Определите состояние и обработчик ввода.

Хорошо, теперь нам нужно управлять состоянием. Итак, мы определяем начальное состояние следующим образом.

//App.jsstate = {placeName: '', places: []} placeSubmitHandler = () => {console.log ("Отправлено")  ;} 

# Шаг 4: Создайте следующие папки внутри Root.

Создайте следующие папки.

  1. действия
  2. редукторы
  3. components

Внутри папки actions создайте один файл с именем types.js. Добавьте следующую строку в

 export const ADD_PLACE = 'ADD_PLACE' 

Тип действия — тип работы редуктора. В зависимости от типа действия будет выполнен случай редуктора, и мы модифицируем состояние таким образом, чтобы оно оставалось чистым. Итак, мы создаем копию существующего состояния и возвращаем новое состояние.

Теперь создайте еще один файл с именем place.js в том же каталоге.

//place.jsimport {ADD_PLACE} из './types';export const addPlace = placeName => {return {type: ADD_PLACE, payload: placeName}} 

Функция addPlace () возвращает действие. Теперь, на основе этого действия, выполняется case функции reducer.

Но нам нужно как-то связать это действие с нашим компонентом App.js. В противном случае мы не сможем добавить данные в хранилище Redux. Также нам нужно сначала создать магазин. Но перед этим нам также нужно создать функцию-редуктор. Итак, сначала создайте редуктор, затем создайте хранилище, а затем подключите приложение React Native к хранилищу Redux .

# Шаг 5 : Создайте функцию Reducer.

Внутри функции reducer создайте один файл с именем placeReducer.js. Добавьте в него следующий код.

//placeReducer.jsimport {ADD_PLACE} из '../actions/types';const initialState = {placeName:' ', places: [  ]}; const placeReducer = (state = initialState, action) => {switch (action.type) {case ADD_PLACE: return {... state, places: state.places.concat ({key: Math.random (),  value: action.payload})};  по умолчанию: вернуть состояние;  }} экспорт по умолчанию placeReducer; 

Итак, здесь мы определили функцию с именем placeReducer , которая принимает два аргумента.

Первый раз , он примет начальное состояние нашего приложения, а затем мы передадим любой аргумент; он принимает этот аргумент и действует в зависимости от исполнения дела. Второй аргумент — это действие, которое состоит из типа и полезной нагрузки. payload — это название места; мы ввели в текстовое поле. Таким образом, он добавляет значение текстового поля в массив places .

Помните здесь; мы вернули новое состояние, а не существующее состояние. Итак, мы изменили состояние в чистом виде, а не существующее состояние.

# Шаг 6: Создайте Redux Store.

Внутри корневой папки создайте один файл с именем store.js и добавьте следующий код.

//store.jsimport {createStore, combReducers} from 'redux  '; импортировать placeReducer из' ./reducers/placeReducer';const rootReducer = combReducers ({places: placeReducer}); const configureStore = () => {return createStore (rootReducer);} экспортировать configureStore по умолчанию; 

Здесь мы создали хранилище redux и передали редуктор в это хранилище. Функция combReducer объединяет все различные редукторы в один и формирует глобальное состояние. Итак, это глобальное состояние всего нашего приложения.

# Шаг 7. Передайте Store приложению React Native.

Внутри корневой папки вы найдете один файл с именем index.js, и внутри этого файла добавьте следующий код.

//index.jsimport {  AppRegistry} из response-native; импортировать React из response; импортировать приложение из ./App; импортировать {имя как appName} из ./app.json; импортировать {Provider} из response-redux  ; импортировать configureStore из './store';const store = configureStore () const RNRedux = () => (  ) AppRegistry.registerComponent (appName, () =  > RNRedux); 

Это почти то же самое, что и веб-приложение React, в котором мы передаем Provider в качестве корневого элемента и передаем хранилище, а затем через connect в react-redux (), мы можем подключить любой компонент React к redux store.

# Шаг 8. Подключите приложение React Native к магазину Redux.

Наконец, мы подключаем наше приложение . .js в магазин Redux . Для этого нам понадобится функция connect () из библиотеки react-redux .

//App.jsimport React  , {Component} из 'react'; импортировать {StyleSheet, View, TextInput, Button, FlatList} из 'react-native'; импортировать ListItem из './components/ListItem'; импортировать {connect} из 'react-redux';  import {addPlace} из './actions/place';class App расширяет компонент {state = {placeName:' ', places: []} placeSubmitHandler = () => {if (this.state.placeName.trim () =  == '') {возврат;  } this.props.add (this.state.placeName);} placeNameChangeHandler = (значение) => {this.setState ({placeName: value});  } placesOutput = () => {return ( index.toString ()} renderItem = {info =>  ()}/>)} render () {return (       {this.placesOutput ()}  );  }} const styles = StyleSheet.create ({container: {paddingTop: 30, justifyContent: 'flex-start', alignItems: 'center',}, inputContainer: {flexDirection: 'row', justifyContent: 'space-between',  alignItems: 'center', width: '100%'}, placeInput: {width: '70% '}, placeButton: {width: '30%'}, listContainer: {width: '100%'}}); const  mapStateToProps = state => {return {places: state.places.places}} const mapDispatchToProps = dispatch => {return {add: (name) => {dispatch (addPlace (name))}}} экспортировать соединение по умолчанию (mapStateToProps,  mapDispatchToProps) (App) 

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

Теперь, если значения хранилища изменены, тогда нам нужно обновить пользовательский интерфейс на основе новых значений. Вот почему создана функция mapStateToProps . Итак, когда массив places магазина получает новое значение, функция рендеринга выполняется снова и обновляет пользовательский интерфейс..

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

Кроме того, внутри папки components создайте один файл с именем ListItem.js и добавьте в него следующий код.

//ListItem.jsimport React from 'react'; import {View, Text, StyleSheet, TouchableOpacity} из 'react-native'; const ListItem = (props) => {return (   {props.placeName}   );} const styles = StyleSheet.create ({listItem: {width: '100%', padding: 10  , marginBottom: 10, backgroundColor: '#eee'}}); экспорт ListItem по умолчанию; 

Этот компонент получает свойства от родительского компонента и отображает данные в правильном формате. Сохраните файл, перейдите в симуляторы и обновите экран.

Наконец, Пример Redux для React Native | Как использовать Redux в React Native закончен. Спасибо, что приняли это.

Рекомендуемые сообщения

Руководство для начинающих по созданию приложения React Native

Как использовать React Native ScrollView

Как подключить приложение React Native с помощью Laravel API Tutorial

Пример компонентов React Native Swipe

React Native Пример FlatList

Пример React Native Drawer Navigator

Пример просмотра вкладок React Native

Встроенная навигация с использованием примера встроенной навигации React

Пример модального окна React Native

Функциональность создания и удаления React Native

Оцените статью
nanomode.ru
Добавить комментарий