Перейти к основному содержимому

Boilerplate

Redux Boilerplate#

В данном уроке мы научимся создавать стандартный BoilerPlate шаблон для проектов Redux. Первым делом создаём папку ./src/actions и файл index.js в ней. Как мы помним Actions является действиями пользователя. А для тех, кто забыл напомнит вот эта картинка redux

Видео#

redux

Написание кода файла ./src/action/index.js#

import SEARCH_CHANGE from '../types'
export const searchChanged = (text) => {    console.log('text', text) return {     type: SEARCH_CHANGE ,     payload: text }}

Правка HomeScreen#

./src/screen1/HomeScreen.js
import React, {Component, useState} from 'react'import { View } from 'react-native'import { connect } from 'react-redux'import { searchChanged } from '../actions'import { Header, Layout, ImageCard, SearchBar } from '../components/uikit'import {  STARGATE_DETAILS} from '../routes'
const url = 'https://api.tvmaze.com/search/shows?q=stargate'class HomeScreen extends Component {  state = {    title: 'STAR GATE',    data: [],    visibleSearchBar: false  }
  componentDidMount = async () => {    try {      const response = await fetch(url)      const data = await response.json()      useState({ data })    } catch (e) {      throw e    }  }    _onChangeText = text => {    this.props.searchChanged(text)  }    render() {    const { title, data, visibleSearchBar } = this.state    const { navigation, movie } = this.props    //console.log('this.props', this.props)    return (      <View>        {          visibleSearchBar ?          <SearchBar           colorRight={'#fff'}           iconRight="magnify"           placeholder="Search"           onChangeText={this._onChangeText}           value={movie}           onPressRight={() => useState({ visibleSearchBar: false})}           onBlur={() => useState({ visibleSearchBar: true })}          /> :          <Header           title={title}           colorRight={'#fff'}          iconRight="magnify"           onPress={() => navigation.openDrawer()}          onPressRight={() => useState({ visibleSearchBar: true })}        />        }        <Layout>          { data.map(item => (            <ImageCard              data={item.show}              key={item.show.id}              onPress={() => navigation.navigate(STARGATE_DETAILS, ({ show: item.show, onGoBack: this.onGoBack}))}            />          ))}        </Layout>      </View>    )  }}
const mapStateToProps = state => {  return {    movie: state.search.movie  }}
export default connect(mapStateToProps, { SearchChanged })(HomeScreen) 

Cоздание и написание App.js#

Создадим файл App.js.

Установим необходимые библиотеки

yarn add redux-devtools-extension
yarn add redux-thunk

Если вылезли ошибки, то пропишите заново/найдите их решение и опять-таки пропишите. Если всё прошло успешно, то погнали!

./App.js
import React from 'react'import { Provider } from 'react-redux'import { composeWithDevTools } from 'redux-devtools-extension'import { createStore, applyMiddleware } from 'redux'import ReduxThunk from 'redux-thunk'import reducers from './src/reducers'import Screen from './src/screen1'
const store = createStore(reducers, composeWithDevTools(    applyMiddleware(ReduxThunk)))
const App = () => {     return (        <Provider store={store}>            <Screen />        </Provider>    )}
export default App

И соответственно поправим корневой index.js

/** @format */
import {AppRegistry} from 'react-native'import App from './App'import {name as appName} from './app.json'
AppRegistry.registerComponent(appName, () => App)

Создание Reducers#

Для начала создадим ./src/reducers и в ней файл index.js

import { combineReducers } from 'redux'import SearchReducer from './SearchReducer'
export default combineReducers({    search: SearchReducer})

Далее создаём SearchReducer.js в той же папке

import SEARCH_CHANGE from '../types'
const INITIAL_STATE = {    movie: ''}export default (state = INITIAL_STATE, action) => {    console.log('action', action)    switch(action.type) {        case SEARCH_CHANGE:            return {                ...state,                movie: action.payload            }            default: return state    }}

Cоздаём types.js#

В папке src создаём файл types.js и пишем

export const SEARCH_CHANGE = 'SEARCH_CHANGE'

В данном уроке мы научились создавать Boilerplate шаблон для проектов Redux. Become a Patron!