1. Справочник
- Введение в редукс
- кейс
- Введение в ядро React-Redux
2. Введение в редукс
-
Redux является членом семейства React Bucket, которое пытается обеспечить механизм «предсказуемого управления состоянием» для приложений React.
-
Redux хранит все состояние приложения в одном месте, называемом хранилищем.
-
Сохраняет дерево состояний (дерево состояний)
-
Компоненты могут отправлять действия в хранилище вместо того, чтобы уведомлять другие компоненты напрямую.
-
Другие компоненты могут обновлять свои представления, подписываясь на состояние в магазине.
3. Установка
npm install --save redux
4. редукционное ядро
4.1 State
состояние представляет собой набор данных
Его можно понимать как сырье, необходимое фабрике для обработки товаров.
4.2 action
Изменения в состоянии приведут к изменениям в представлении. Однако пользователь не может касаться состояния, а только представления, поэтому изменение состояния должно быть вызвано представлением.
Действие — это инструкция по изменению состояния, а действий столько же, сколько действий по манипулированию состоянием.
Действия можно понимать как индикаторы, которые описывают, что произошло
4.3 функция обработки редуктора
После того, как действие выдает команду, оно помещает состояние в функцию обработки reucer и возвращает новое состояние.Можно понимать как обрабатывающую машину
4.4 store
магазин можно понимать как общую фабрику с несколькими обрабатывающими машинами
let store = createStore(reducers);
Магазин — это объект, который их связывает. Магазин имеет следующие обязанности:
维持应用的 state；
提供 getState() 方法获取 state；
提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器。
Мы можем узнать статус товара на фабрике через store.getState(), Используйте store.dispatch для отправки команд действий.
5. Классический чехол
Это классический случай редукции
- Определите функцию редуктора для изменения состояния в соответствии с типом действия.
- действия определяют директивы
- Создайте магазин с помощью createStore
- Вызовите store.dispatch(), чтобы выполнить команду для изменения состояния.
import { createStore } from 'redux'
const reducer = (state = {count: 0}, action) => {
switch (action.type){
case 'INCREASE': return {count: state.count + 1};
case 'DECREASE': return {count: state.count - 1};
default: return state;
}
}
const actions = {
increase: () => ({type: 'INCREASE'}),
decrease: () => ({type: 'DECREASE'})
}
const store = createStore(reducer);
store.subscribe(() =>
console.log(store.getState())
);
store.dispatch(actions.increase()) // {count: 1}
store.dispatch(actions.increase()) // {count: 2}
store.dispatch(actions.increase()) // {count: 3}
Мы можем использовать store.dispatch прямо на реагирующем компоненте, но это неудобно, в это время нам нужен react-redux
class Todos extends Component {
render(){
return(
<div onCLick={()=>store.dispatch(actions.delTodo()) }>test</div>
)
}
}
6. react-redux
Официальная библиотека привязки React, предоставленная Redux. Эффективный и гибкий.
6.1 Установка
npm install --save react-redux
6.2 Ядро
- < Provider store>
- connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
Если какой-либо компонент в Provider (такой как Comp здесь) должен использовать данные в состоянии, он должен быть «подключенным» компонентом — «компонент, который вы написали (MyComp)», обернут с использованием продукта метода подключения.
Эта функция позволяет нам привязать данные из хранилища в качестве реквизита к компоненту.
Простой процесс показан на следующем рисунке:
Метод connect в react-redux оборачивает getState и отправляет хранилище в реквизиты компонента.
Измените код отправки непосредственно в компоненте следующим образом:
index.js
import React, { Component } from 'react';
import store from '../store';
import actions from '../store/actions/list';
import {connect} from 'react-redux';
class Todos extends Component {
render(){
return(
<div onCLick={()=>this.props.del_todo() }>test</div>
)
}
}
export default connect(
state=>state,
actions
)(Todos);
Провайдер может получить хранилище ключей и передать его каждому дочернему компоненту.
7. Как работает подключение?
connect() принимает четыре параметра: mapStateToProps, mapDispatchToProps, mergeProps и options.
7.1 mapStateToProps这个函数允许我们将 store 中的数据作为 props 绑定到组件上。
reducer.js
export default function (state = { lists: [{text:'移动端计划'}],newType:'all'}, action) {
switch (action.type) {
case types.ADD_TODO:
return {...state,lists:[...state.lists,{text:action.text}]}
case types.TOGGLE_TODO:
return {...state,lists:state.lists.map((item,index)=>{
if(index == action.index){
item.completed = !item.completed
}
return item
})}
case types.DEL_TODO:
return {...state,lists:[...state.lists.slice(0,action.index),...state.lists.slice(action.index+1)]}
case types.SWITCH_TYPE:
console.log({...state,newType:action.newType})
return {...state,newType:action.newType}
default:
return state;
}
}
В reducer.js определено инициализированное состояние.Через метод подключения мы можем использовать this.props.lists для получения инициализированного состояния.
import React, { Component } from 'react';
import store from '../store';
import actions from '../store/actions/list';
import {connect} from 'react-redux';
class Todos extends Component {
render(){
return(
{
+ <ul>
+ this.props.state.lists.map(list =>(
+ <li>{list.text}</li>
+ ))
+ </ul>
}
<div onCLick={()=>this.props.del_todo() }>test</div>
)
}
}
export default connect(
state=>state,
actions
)(Todos);
При изменении состояния или при изменении ownProps будет вызываться mapStateToProps для вычисления нового stateProps и обновления его до MyComp (после слияния с ownProps).
7.2 mapDispatchToProps(dispatch, ownProps): dispatchProps connect 的第二个参数是 mapDispatchToProps，它的功能是，将 action 作为 props 绑定到 MyComp 上。
action.js
import * as types from "../action-types";
export default{
add_todo(text){
return { type: types.ADD_TODO, text: text}
},
del_todo(idx){
return {type:types.DEL_TODO, index: idx}
},
toggle_todo(index){
return {type:types.TOGGLE_TODO, index}
},
del_todo(index){
return {type:types.DEL_TODO, index}
},
switch_type(newType){
return {type:types.SWITCH_TYPE, newType}
}
}
Команда, которую я определяю в action.js для изменения состояния, станет реквизитом и привязана к компоненту reac через метод подключения mapDispatchToProps.
Мы можем легко использовать для вызова
<div onCLick={()=>this.props.del_todo() }>test</div>
8. Идите вглубь
Зная это, мы обнаружим, что метод store.dispatch не используется для выдачи команд, но состояние было изменено, и вид изменился, так что же произошло?
store.dispatch(actions.increase())
Ключ подключения ()
Упрощенная версия принципа подключения
import React,{Component} from 'react';
import {bindActionCreators} from 'redux';
import propTypes from 'prop-types';
export default function(mapStateToProps,mapDispatchToProps){
return function(WrapedComponent){
class ProxyComponent extends Component{
static contextTypes = {
store:propTypes.object
}
constructor(props,context){
super(props,context);
this.store = context.store;
this.state = mapStateToProps(this.store.getState());
}
componentWillMount(){
this.unsubscribe = this.store.subscribe(()=>{
this.setState(mapStateToProps(this.store.getState()));
});
}
componentWillUnmount(){
this.unsubscribe();
}
render(){
let actions= {};
if(typeof mapDispatchToProps == 'function'){
actions = mapDispatchToProps(this.store.disaptch);
}else if(typeof mapDispatchToProps == 'object'){
console.log('object', mapDispatchToProps)
actions = bindActionCreators(mapDispatchToProps,this.store.dispatch);
}
return <WrapedComponent {...this.state} {...actions}/>
}
}
return ProxyComponent;
}
}
1. Возврат состояния Для магазина, загруженного из предоставленного родительского компонента в соединении, верните статус, вернув статус
mapStateToProps(this.store.getState());
С помощью вспомогательной функции Redux bindActionCreators() используйте диспетчеризацию для мониторинга каждого действия.
bindActionCreators(mapDispatchToProps,this.store.dispatch);
Поэтому, когда вызывается метод реквизита, событие store.dispach(XXX) будет автоматически инициировано, и будет выдана команда
Ссылка на простой пример проекта react-redux
На этом анализ react-redux заканчивается, а о промежуточном программном обеспечении redux я продолжу писать позже!
Если вы думаете, что это весело, пожалуйста, обратите внимание ~ Добро пожаловать, чтобы собрать и написать комментарий ~~~
Объявление о вакансии
ByteDance набирает сотрудников!
Описание вакансии: Front-end development (senior) ToB направление - видео облако (База: Шанхай, Пекин)
1. Отвечает за производство мультимедийных услуг, таких как аудио и видео по запросу / прямая трансляция / общение в реальном времени и создание облачных платформ для бизнеса;
2. Отвечает за мультимедийную систему качества, эксплуатацию и техническое обслуживание, построение и развитие системы;
3. Хорошо разбирается в абстрактном дизайне, инженерном мышлении, фокусируется на взаимодействии и создает максимальный пользовательский опыт.
Профессиональные требования
1. Компьютеры, связь и электронная информатика и другие смежные специальности являются предпочтительными;
2. Владение различными фронтенд-технологиями, включая HTML/CSS/JavaScript/Node.js и т. д.;
3. Глубокое понимание языка JavaScript с использованием основных сред разработки, таких как React или Vue.js;
4. Приветствуется знание Node.js, понимание Express/KOA и других фреймворков, а также опыт разработки крупномасштабных серверных программ;
5. Иметь определенное представление о пользовательском опыте, интерактивной работе и анализе потребностей пользователей, а также иметь опыт разработки продуктов или интерфейсов;
6. Предпочтение отдается участникам со своими собственными техническими продуктами, работами с открытым исходным кодом или активным сообществом с открытым исходным кодом.
Основные моменты работы
Команда видеооблачных сервисов опирается на накопленные аудио- и видеотехнологии и базовые ресурсы Douyin, Xigua Video и других продуктов, чтобы предоставлять клиентам универсальные аудио- и видеомультимедийные услуги, включая аудио- и видеопо запросу, прямую трансляцию, реальную связь времени, обработка изображений и т. д. Внутренне, как центр видеотехнологий, он обслуживает внутренний бизнес; снаружи он создает готовые аудио- и видео-мультимедийные сервисные решения для обслуживания пользователей корпоративного уровня.
У команды есть стандартизированный процесс итерации проекта и идеальная конфигурация ролей проекта; сильная техническая атмосфера, охватывает сообщество открытого исходного кода и регулярно делится, так что каждый может быстро расти вместе с бизнесом и использовать технологии, чтобы изменить мир!
способ доставки
Резюме можно отправлять напрямую по адресу:yuanyuan.wallace@bytedance.com
Вы также можете отсканировать внутренний QR-код для доставки онлайн, с нетерпением жду вашего присоединения! ~