Здравствуйте, я независимый веб-разработчик из Украины. И я хочу рассказать вам в этой статье, как я изучал Redux.js (в следующем «редуксе»).
Я сделал для себя такой вывод, изучая программирование: если вы чего-то не понимаете — сделайте паузу. Сделайте что-нибудь еще. Если эти знания вам понадобятся, попробуйте еще раз выучить. Тогда будет еще больше шансов понять эту технологию.
В моем случае с редуксом, когда я впервые попытался изучить его, я изучал javascript, react.js, node.js. Но при первой попытке понять избыточность это было напрасно. Я сделал паузу и начал изучать Python (и немного Laravel и GO).
На питоне я написал бота для телеграммы (который может распознавать музыку из видео, которое я читаю из сообщений телеграммы (например, как шазам), уведомлять о новых сериях сериалов, которые я смотрю, и некоторые функции для получения информации с разных сайтов), парсеры для сайтов и несколько небольших скриптов. Но это уже другой вопрос, не имеющий прямого отношения к этой истории.
Итак, когда я пытался выучить со второй попытки, редукс стал более понятным для понимания.
Приступим, сначала заглянем в официальную документацию редукс.
Состояние всего вашего приложения хранится в дереве объектов в одном (хранилище). Магазин содержит все дерево состояний вашего приложения. Единственный способ изменить состояние внутри него — отправить на него (действие) — объект, описывающий, что произошло. (Reducers) указывает, как изменяется состояние приложения в ответ.
Например, я покажу вам часть кода для пользовательского модального окна из проекта.
Сначала напишите действия
actions/index.js
// write constant and do export her
export const TOGGLE_MODAL = ‘TOGGLE_MODAL’
// when this action is active, for reducer, action function do
// return: action type and action data.
export function showModal(flag){
return {
type: TOGGLE_MODAL,
flag
}
}
Потом наши редукторы. Если в вашем приложении много компонентов, для которых требуется избыточность, создайте для каждого компонента действия и редукторы, а затем объедините их в index.js. В этом примере только один редюсер, поэтому мы пишем его в index.js
reducers/index.js
import { combineReducers } from 'redux'
// from actions we import our const which we wrote past
import TOGGLE_MODAL from '../actions'
// the switch checked action type, who came from actions. In this case, reducer just return data from action
function toggleModal(state = false, action){
switch (action.type) {
case TOGGLE_MODAL:
return action.flag
default:
return state
}
}
// Combine many reducers and export this
const rootReducer = combineReducers({
toggleModal
})
export default rootReducer
Теперь очередь компонента, в котором мы будем использовать приведенный выше редукс.
// this our main run file
containers/mainContainer.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { showModal } from '../actions'
class Example extends Component{
// handler for dispatch showModal (call action =>
// active reducer => update store)
handleActionModal = () => {
this.dispatch(showModal(!this.props.toggleModal))
}
// event handler function close and open modal for background
// modal and close button
handleToggleModal = (e) => {
if(e.target === document.querySelector(".modal-custom") ||
e.target === document.querySelector(".modal-close")){
this.dispatch(showModal(!this.props.toggleModal))
}
}
// custom modal for show detailed info
modalCustom(data){
return(
<div className="custom-modal"
style={{display: this.props.toggleModal? "flex":"none"}}
// if click on outside of main info, modal will be closed
onClick={(e) => this.handleToggleModal(e)}>
// and add close action to close_button
<img src="/close_circle.svg" alt="close" className="close-modal" onClick={this.handleToggleModal}/>
{data.url&&
<img className="image-content" src={data.url}
alt={data.title}
/>
}
{!data.url&&
<h1>Loading ...</h1>
}
</div>
)
}
render () {
// get data from props
const { data } = this.props
return (
<div>
{this.props.toggleModal&&
this.modalCustom(data)
}
// hendler event connect to button
<button onClick={ this.handleActionModal }>Active Modal</button>
// for send data with arrow functions
// <button onClick={ () => this.handleActionModal(data) }>Active Modal</button>
</div>
)
}
}
Records.propTypes = {
data: PropTypes.array.isRequired,
toggleModal: PropTypes.bool.isRequired
}
// write props from state
function mapStateToProps(state) {
const { data, toggleModal } = state
return {
data,
toggleModal
}
}
export default connect(mapStateToProps)(Example)
P.S: Вы также можете посмотреть видео, рекомендованное авторами Redux.
