freeCodeCamp/guide/russian/redux/tutorial/index.md

title	localeTitle
React Redux Basic Setup	React Redux Basic Setup

React Redux Basic Setup

В этом руководстве читателю будет представлено, как настроить простое приложение React и Redux.

Он основан на принципе, что приложение Node.js уже создано и работает с помощью Express и Webpack .

Монтаж

Предполагая, что все настроено и работает правильно, есть некоторые пакеты, которые необходимо добавить, чтобы Redux работал с React.

Откройте терминал внутри созданной папки проекта и выполните следующую команду

npm install --save react react react-dom react-redux react-router redux 

То, что делает вышеприведенная команда, устанавливает локальные пакеты и добавляет ссылку на файл package.json в зависимостях.

Также добавьте в свой браузер следующий инструмент Redux Dev Tools .

Это позволит разработчику увидеть состояние приложения и его изменения и какие действия также инициируются.

Структура папок

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

project_root 
 │   index.js 
 | 
 └───client 
 |   App.jsx 
 |   NotFound.jsx 
 | 
 └───common 
    │ 
    └───actions 
    |   │  appActions.js 
    | 
    └───constants 
    |   │  Actiontypes.js 
    | 
    └───reducers 
    |   │   appReducer.js 
    └───store 
        │   store.js 

Описание компонентов приложения и то, как они взаимодействуют с самим собой и с сокращением

Реализация точки входа приложения

• /project_root/index.js
  • Является ли точкой входа для приложения, она будет содержать точку входа для хранилища, и она отобразит файл App.jsx.

Ниже приведен пример кода, который будет объявлен в файле

import React from 'react'; 
 import {render} from 'react-dom'; 
 import {Router,Route,browserHistory} from 'react-router'; 
 import {Provider} from "react-redux"; 
 import store from "../common/store/store"; 
 import App from '../client/App'; 
 import NotFound from '../client/notFound'; 
 
 render( 
    <Provider store={store}> 
        <Router history={browserHistory}> 
            <Route path="/" component={App} /> 
            <Route path="*" component={NotFound}/> 
        </Router> 
    </Provider>, 
    document.getElementById('root') 
 ); 

В этом примере к файлу добавляются обычные реакции импорта, но также и некоторые новые, такие как Router, Route, browserHistory.

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

А также там, где хранилище приложений добавлено и разрешено работать в приложении.

Внедрение прикладных компонентов

Следующий файл:

• /client/App.jsx
• Этот файл является базовым файлом приложения, и где реакция и редукция будут связываться между собой.

import React, { Component } from 'react'; 
 import {connect} from 'react-redux'; 
 import PropTypes from 'prop-types'; 
 import {ActionA,ActionB,ActionC} from '../common/actions/appActions'; 
 class App extends Component{ 
 
    // example of triggering the action inside a component 
    foo=()=>{ 
        this.props.doStringMessage(`Hello World`); 
    } 
    //default render function of the component 
    render(){ 
        return( 
            // the base component 
        ); 
    } 
 } 
 /** 
 * es6 fat arrow function to get information from the application state 
 * @param {*} state current state of the application 
 */ 
 const mapStateToProps=state=>{ 
    return { 
        ArrayValue:state.example.exapleArray, 
        StringMessage:state.example.exampleString, 
        bookApploggedIn:state.example.exampleBool, 
        ObjectValue:state.example.exampleObject 
    }; 
 }; 
 /** 
 * es6 fat arrow function to connect the actions declared in the action file to the the component as if they were common react props 
 * @param {*} dispatch function send to action file to be later processed in the reducer 
 */ 
 const mapDispatchToProps=dispatch=>{ 
    return { 
        doStringMessage:(value)=>{ 
            dispatch(ActionA(value)); 
        }, 
        getArrayItems:()=>{ 
            dispatch(ActionB()); 
        }, 
        doBooleanChange:(value)=>{ 
            dispatch(ActionC(value)); 
        } 
    }; 
 }; 
 /** 
 * this function connects the application component to be possible to interact with the store 
 * @param {*} mapStateToProps allows the retrieval of information from the state of the application 
 * @param {*} mapDispatchToProps allows the state to change via the actions defined inside 
 */ 
 export default connect(mapStateToProps,mapDispatchToProps)(App); 

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

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

Декларация о действиях приложения

Следующий файл:

• /common/actions/appActions.js

• В этом файле каждый из указанных действий будет взаимодействовать с состоянием приложения и редуктором.

• А также любой внешний вызов api, необходимый приложению, должен быть здесь, а затем передан в редуктор по вызову действия.

  `` `Javascript Импортировать { APP ACTION A, APP ACTION B, APP ACTION C } из '../constants/Actiontypes'; / **

• es6 константа для общения с редуктором для выполнения заданного действия

• @param {Object} значение объекта или любого другого типа, который должен быть установлен в редукторе / export const doActionA = значение => ({ тип: APP ACTION A, значение }); /

• es6 константа для общения с редуктором для выполнения заданного действия

• @param {Object} объект или любой другой тип, который должен быть установлен в редукторе / export const doActionB = value => ({ тип: APP ACTION B, значение }); /

• es6 константа для общения с редуктором для выполнения заданного действия

• @param {Object} объект или любой другой тип, который должен быть установлен в редукторе / export const doActionC = value => ({ тип: APP ACTION C, значение }); /

• es6, которая будет знать компонент, чтобы было возможным взаимодействие между компонентом и состоянием

• @param {Object} значение объекта или любого другого типа, который должен быть установлен в редукторе / export const ActionA = value => dispatch => { отправка (doActionB (значение)); }; /

• es6, которая будет знать компонент, чтобы было возможным взаимодействие между компонентом и состоянием ** / export const ActionB = () => dispatch => { отправка (doActionB (истина)); }; In the example code provided above, the item ActionB``` будет доступен для компонента App.jsx, и когда он будет запущен компонентом через опору, он вызовет соответствующие действия внутри этого файла, а затем к редуктору и изменит соответственно.

Реализация типов действий

Следующий файл:

• /common/constants/Actiontypes.js
• Этот файл будет содержать объявление каждого из типов действий, доступных для использования приложением.
• Заявки, сделанные здесь, должны будут сделать доступными для файла действий, чтобы они обрабатывались в приложении.

export const APP_ACTION_A='MAKE_A'; 
 export const APP_ACTION_B='MAKE_B'; 
 export const APP_ACTION_C='MAKE_C'; 

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

Редукторная реализация

Следующий файл:

• /common/reducers/appReducer.js
  • Редуктор по сути является не чем иным, как функцией javascript pure, которая проверяет, соответствует ли какое-либо из условий срабатыванию, и вносит изменения в состояние, никогда не изменяя его.

 import { 
    APP_ACTION_A, 
    APP_ACTION_B, 
    APP_ACTION_C 
 } from '../constants/Actiontypes'; 
 
 /** 
 * es6 example of a declaration of the reducer 
 * @param {Object} state contains all the application's state properties needed 
 * @param {action} action the action that will trigger the state's changes 
 **/ 
 const ExampleAppReducer= (state = { 
    exampleBool:false, // boolean value 
    exampleString:'', // string value 
    exampleArray: [], // array value 
    onError:{ 
        A:'', 
        B:'', 
        C:'' 
    } // object with properties inside 
 }, action) => { 
    //switch statement that will test every case and make the necessary changes, never mutating the state as it's being preserved always 
    switch(action.type){ 
        case APP_ACTION_A:{ 
            return { 
                ...state, // es6 epread operator to make a copy of the existing state object 
                exampleBool:action.value // the state property changes accordingly to the value of the action triggered 
            }; 
        } 
        case APP_ACTION_B:{ 
            return { 
                ...state, 
                exampleString:action.value 
            }; 
        }, 
        case APP_ACTION_C:{ 
            return { 
                ...state, 
                exampleArray:action.value 
            }; 
        } 
        default:{ 
            return state; // if any of the actions triggered is not defined here it will return the default state 
        } 
    } 
 }; 
 export default ExampleAppReducer; 

Приведенный выше код иллюстрирует, как определяется базовый редуктор и вносит изменения в состояние, посредством тестирования определенного состояния.

Реализация магазина

Файл:

• /common/store/store.js
• Этот файл будет содержать определение дерева состояний приложения, чтобы изменить состояние внутри, для этого нужно отправить actin.
• Это не что иное, как объект с объявленными внутри методами, наиболее важным для создания магазина

`` `Javascript import {createStore} из 'redux'; пример импорта из «../reducers/ExampleAppReducer»;

экспорт по умолчанию createStore ( пример ); `` ` В приведенном выше коде показано, как определить простой магазин приложений.

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

дальнейшее чтение

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

Redux Docs

Redux Api

Примеры Redux