{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":228,"offset":0,"style":"ITALIC"}],"text":"Должен отметить что эта статья ни в коем случае не претендует на «best practice», и окажется для Вас полезной в том случае, если Вы, как и я в свое время, столкнулись с трудностью понимания принципов использования Redux в React.","type":"blockquote","key":"3puv4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":87,"offset":0,"style":"ITALIC"}],"text":"P.S. В статье может быть целая куча пунктуационных ошибок, пусть они Вас не тревожат ;)","type":"blockquote","key":"bpomb"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":6,"offset":328}],"inlineStyleRanges":[],"text":"Я сам не являюсь frontend-разработчиком, но в своих побочных проектах я, как это часто бывает, и швец, и жнец, и на дуде игрец. Поэтому в той или иной степени пытаюсь и во фронт, хотя по большей степени предпочитаю пользоваться фреймворками, чтобы сэкономить время. Так например, я начал изучать React, и даже запилил mini-app «Вместе» для VK. Во время разработки я столкнулся с потребностью протаскивать состояние через длинную цепь компонентов, что иногда бывало затруднительно. И я задумался, а можно ли как-то менять состояние глобально?","type":"unstyled","key":"ba1jk"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":4,"offset":167}],"inlineStyleRanges":[],"text":"Для этой цели как раз и существует Redux. Я не буду объяснять что это такое, если вы читаете это значит вы наверняка и сами уже сто раз прочли толковые статьи по типу этой. Тем не менее на всякий случай публикую наглядную схему:","type":"unstyled","key":"684rh"},{"data":{"image":{"id":"5ffedafa91e2ac4095298422"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4f5qa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот только примеры у всех этих статьей для меня оказались либо слишком сложными, либо слишком поверхностными. Я пытался сделать, казалось бы, простую вещь — по нажатию на кнопку на одном экране, глобально изменить текст на другом, который как раз берется из состояния приложения.","type":"unstyled","key":"emkg1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":119,"offset":0,"style":"ITALIC"},{"length":173,"offset":120,"style":"ITALIC"}],"text":"Говоря об экранах я имею ввиду React-Native , но в рамках статьи это не имеет никакого значения, принципы одни и те же. Вам не обязательно повторять за мной целиком, вы можете даже использовать совершенно другие компоненты и архитектуру приложения, главное обратите внимание на работу с Redux.","type":"blockquote","key":"bkls5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, приступим. Предположим Вы уже создали проект реакт. Вот так выглядит мой основной компонент App:","type":"unstyled","key":"co837"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1042,"offset":0,"style":"ITALIC"}],"text":"import React from 'react'; // сам React\nimport {Provider} from 'react-redux'; // сам Redux \nimport { NavigationContainer } from '@react-navigation/native'; // React-Native\nimport { createDrawerNavigator } from '@react-navigation/drawer'; // Компонент навигации\nimport store from '../../store'; // объект хранилища, речь о создании которого будет ниже\n/*Мои кастомные компоненты*/\nimport FirstScreen from '../firstscreen';\nimport SecondScreen from '../secondscreen'; \n\n\nconst Drawer = createDrawerNavigator();\nexport default class App extends React.Component {\n render(){\n return(\n \n \n \n \n \n \n \n \n ) ;\n }\n}","type":"unstyled","key":"1r7nq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мое приложение состоит из 2х экранов — FirstScreen и SecondScreen. На обоих экранах есть кнопки, которые могут менять текст друг у друга. Для этого и используется Redux. Создадим директорию store в корне приложения, а в ней следующие папки и файлы:","type":"unstyled","key":"8u0g4"},{"data":{"image":{"id":"5ffedc2c96f6d30d4c49df18"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"p60i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что за что отвечает? Начнем с папки types. В ней хранятся пользовательские типы, передаваемые экшеном в редьюсером, на основе которых будут производится те или иные действия. То есть, это своеобразные флаги. Наверное это звучит сумбурно, но в дальнейшем будет понятней. Вот код единственного файла в папке:","type":"unstyled","key":"buoks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":93,"offset":0,"style":"ITALIC"}],"text":"/* store/types/index.js */ \n\nexport const TEST_1 = \"TEST_1\";\nexport const TEST_2 = \"TEST_2\";","type":"unstyled","key":"dbt55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все, как видите, ни для чего кроме как для хранения констант этот файл и не нужен. Идем дальше, в папку actions. Здесь хранятся действия, каждое из которых влияет на изменение глобального состояния приложения. Если Вы помните схему выше, то именно экшены дергают редьюсеры, которые уже непосредственно отражаются на состоянии.","type":"unstyled","key":"3j498"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":365,"offset":0,"style":"ITALIC"}],"text":"/* store/actions/index.js */ \n\nimport {TEST_1,TEST_2} from '../types';\n\nexport const change1stScreen = (text) => {\n console.log(\"Action 1: \"+ text);\n return {\n type: TEST_1,\n payload: text\n }\n}\n\nexport const change2ndScreen = (text) => {\n console.log(\"Action 2: \"+ text);\n return {\n type: TEST_2,\n payload: text\n }\n}","type":"unstyled","key":"3b2kt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что мы видим — у нас есть 2 действия, каждое из которых принимает на вход строку, и возвращает объект с 2мя свойствами: type и payload . Что такое type и так ясно а payload это и есть полезная информация, в нашем случае текст на который будет произведена замена при нажатии кнопки. Потому переходим в папку reducers, и смотрим что там.","type":"unstyled","key":"a9cou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1й редьюсер:","type":"unstyled","key":"5og38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":444,"offset":0,"style":"ITALIC"}],"text":"/* store/reducers/test1.js */ \n\nimport {TEST_1} from '../types';\n\nconst INITIAL_STATE = {\n text1: \"default text 1\"\n};\n\nexport default (state = INITIAL_STATE, action) => {\n switch (action.type) {\n case TEST_1:\n return {\n ...state, text1: action.payload // обновляем текст\n }\n default:\n return state; // если тип не пришел, тогда просто возвращаем INITIAL_STATE\n }\n}","type":"unstyled","key":"6k1cf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2й редьюсер:","type":"unstyled","key":"871a4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":447,"offset":0,"style":"ITALIC"}],"text":"/* store/reducers/test2.js */ \n\nimport {TEST_2} from '../types';\n\nconst INITIAL_STATE = {\n text2: \"default text 2\"\n};\n\nexport default (state = INITIAL_STATE, action) => {\n switch (action.type) {\n case TEST_2:\n return {\n ...state, text2: action.payload // обновляем текст \n }\n default:\n return state; // если тип не пришел, тогда просто возвращаем INITIAL_STATE \n }\n}","type":"unstyled","key":"78hln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В моем примере оба редьюсера почти идентичны, само собой я сделал это намеренно, чтобы было понятней. Что тут происходит — мы создаем дефолтное состояние (INITIAL_STATE), далее экспортируем лямбда функцию, которая в зависимости от типа обновляет состояние на пришедший payload. Как видите тип позволяет сделать процесс работы с редьюсером более гибким, и например обновлять несколько свойств состояния за раз (в моем примере это не рассматривается, но это не должно вызывать какие либо сложности). По дефолту мы возвращаем INITIAL_STATE.","type":"unstyled","key":"77ap1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В индексном файле мы объединяем все наши редьюсеры в 1. Это удобнее чем создавать один огромный редьюсер.","type":"unstyled","key":"4uc5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":214,"offset":0,"style":"ITALIC"}],"text":"/* store/reducers/index.js */\n\nimport {combineReducers} from 'redux';\nimport test1 from './test1';\nimport test2 from './test2';\n\nexport default combineReducers({\n testReducer1: test1,\n testReducer2: test2\n});","type":"unstyled","key":"5qfla"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну и наконец создаем хранилище в файле index.js папки store:","type":"unstyled","key":"8accb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":154,"offset":0,"style":"ITALIC"}],"text":"/* store/index.js */ \n\nimport {createStore} from 'redux';\nimport reducers from './reducers';\n\nconst store = createStore(reducers);\n\nexport default store;","type":"unstyled","key":"8esep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дело осталось за малым, применить все вышеописанное в наших экранах FirstScreen и SecondScreen","type":"unstyled","key":"45a3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":947,"offset":0,"style":"ITALIC"}],"text":"// firstscreen.js\n\nimport React from 'react';\nimport {\n View,\n Text,\n Button\n } from 'react-native';\nimport { connect } from 'react-redux';\nimport { change2ndScreen } from '../../store/actions';\nimport { bindActionCreators } from 'redux';\n\n\n\nclass FirstScreen extends React.Component {\n constructor(props){\n super(props);\n }\n\n render(){\n let {text1} = this.props;\n return( \n \n Text 1st Screen: {text1}\n this.props. change2ndScreen(\"new text 2\")} title=\"change 2nd Screen Text\"> \n \n );\n }\n}\n\nconst mapStateToProps = state => ({ \n text1: state.testReducer1.text1\n });\n\nconst mapDispatchToProps = dispatch => ({\n change2ndScreen: bindActionCreators(change2ndScreen, dispatch)\n });\n \n \n export default connect(\n mapStateToProps,\n mapDispatchToProps\n )(FirstScreen);","type":"unstyled","key":"cpt0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":582,"style":"BOLD"}],"text":"Объясняю по порядку — компонент FirstScreen выступает в роли первого экрана. Он содержит текст со строкой содержащей строку из сформированного нами ранее хранилища (store) и кнопку, изменяющую текст второго экрана с помощью экшена change2ndScreen. Свойство text1 было у первого редьюсера. А получаем мы всю эту канитель с помощью mapStateToProps . Точно также мы получаем и необходимые нам экшены, но уже через mapDispatchToProps (их мы вынуждены импортировать вручную, прежде чем привязать). Далее мы привязываем через connect() полученные от редьюсера свойства и экшены к объекту props а не в state компонента. Чаще всего когда говорят о Redux фигурирует слово «состояние», что может вызвать путаницу.","type":"unstyled","key":"6ik00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если у Вас возник вопрос а как redux получает доступ к store в этом компоненте, то обратите внимание на Provider в примере кода главного компонента App. В Provider обернуто все приложение. Это и обеспечивает связь низкоуровневых компонентов с хранилищем через Redux.","type":"blockquote","key":"3k9ld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По той же схеме сделан и компонент SecondScreen","type":"unstyled","key":"ctb52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":949,"offset":0,"style":"ITALIC"}],"text":"// secondscreen.js\n\nimport React from 'react';\nimport {\n View,\n Text,\n Button\n } from 'react-native';\nimport { connect } from 'react-redux';\nimport { change1stScreen } from '../../store/actions';\nimport { bindActionCreators } from 'redux';\n\n\n\nclass SecondScreen extends React.Component {\n constructor(props){\n super(props);\n }\n\n render(){\n let {text2} = this.props;\n return( \n \n Text 2nd Screen: {text2}\n this.props.change1stScreen(\"new text 1\")} title=\"change 1st Screen Text\"> \n \n );\n }\n}\n\nconst mapStateToProps = state => ({ \n text2: state.testReducer2.text2\n });\n\nconst mapDispatchToProps = dispatch => ({\n change1stScreen : bindActionCreators(change1stScreen, dispatch)\n });\n \n \n export default connect(\n mapStateToProps,\n mapDispatchToProps\n )(SecondScreen);","type":"unstyled","key":"1djko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот и все. Надеюсь что у Вас получилось вникнуть в то как использовать Redux в React на моем ( худо-бедно, но все же) примере. Попробуйте воспроизвести и убедиться в его работоспособности. Или поупражняйтесь чтобы закрепить полученные знания.","type":"unstyled","key":"en1qn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fuhgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eqf05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8sg69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"19q06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"L44IMBFxivAzjNwDhAb6"}],"entityMap":{"0":{"data":{"href":"https://vk.com/app7540399","url":"https://vk.com/app7540399"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://tproger.ru/translations/redux-for-beginners/","url":"https://tproger.ru/translations/redux-for-beginners/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}