Руководство по рабочему процессу Redux и инженерному кодированию

React.js

1. Что такое Редукс?

Redux — это контейнер состояния JavaScript, обеспечивающий предсказуемое управление состоянием. Он специально разработан для фреймворка React.js, но не только для реакции, а для любой интерфейсной библиотеки.

Итак, зачем React.js нужно это управление контейнерами состояний?

Во-первых, понятно, что такое React.По официальному определению, React — это только фреймворк для слоя представления, который решает проблему рендеринга данных и шаблонов, но не предоставляет решения для управления состоянием данных, которое очень большой проект в больших проектах Болевые точки. Например:

Любое сложное приложение будет иметь такую ​​древовидную структуру компонентов, так как же компоненты, не являющиеся родительскими и дочерними, передают данные? Например, компонент, отмеченный синим цветом, передает данные компоненту в правом нижнем углу.Если используется только метод передачи значения родитель-потомок компонента реакции, его нужно сначала передать родительскому компоненту, а затем передать от родительского компонента к родительскому компоненту верхнего уровня, а затем переход к следующим подкомпонентам... Очевидно, это просто взаимодействие двух компонентов, не слишком ли неудобно использовать такую ​​сложную операцию? Если проект немного сложен, он становится неуправляемым, даже если его можно развивать. Так появился Redux. Позвольте Redux управлять данными унифицированным способом, и операции любого компонента над данными передаются Redux для управления, что значительно повышает эффективность разработки и обслуживания.

2. Принципы дизайна Redux

1. Единый источник данных

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

2, состояние только для чтения

Состояние доступно только для чтения, единственный способ изменить состояние извне — запустить действие для его изменения.

3. Используйте чистые функции для изменения

Для того, чтобы описать, как действие меняет состояние, нужно написать какую-то конкретную логику, которую пропишут в редюсере. Редуктор — это какая-то чистая функция.

Чистая функция: с фиксированным входным параметром и фиксированным возвратным выходом не будет асинхронной операции, и значение параметра не будет изменено в процессе.

3. Рабочий процесс Redux

Может быть, на первый взгляд не очень понятно, не беда, в качестве аналогии можно использовать пример заимствования книг из библиотеки:

Картинка стоит тысячи слов, на самом деле рабочий процесс redux тоже очень прост.

В-четвертых, используйте избыточность

// src/store/index.js
import { createStore } from 'redux';
import reducer from './reducer';
//通过createStore创建一个store，把reducer作为参数传入
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()//chrome中激活redux devtools插件
);

export default store;

// src/store/reduce.js
const defaultState = {
  inputValue: '',
  list: []
}
export default (state = defaultState, action) => {
  if(action.type === 'add_item') {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(newState.inputValue)
    newState.inputValue = ''
    return newState
  }
  return state;
}

// App.js
import React, { Component } from 'react'
import store from './store/index.js'

class App extends Component {
  constructor(props) {
    super(props);
    //从redux拿到state
    this.state = store.getState()
    //store需要通过一个方法给组件传递newState，并将这个方法传入subscribe函数的参数里面
    this.handleStoreChange = this.handleStoreChange.bind(this)
    store.subscribe(this.handleStoreChange)
  }
  render() { 
    return ( 
     //渲染部分
    );
  }
  handleStoreChange() {
    //更新组件状态
    this.setState(store.getState())
  }
}

export default App;

  //在响应点击事件的函数中
  handleItemClick(e) {
    const action = {
        type: 'add_item',
        value: e.target.value
    }
    //由store进行action的分发
    store.dispatch(action)
  }

5. Пишите Действия более научно

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

В это время необходимо написать более стандартизированные действия для предотвращения подобных аварий.

// src/store/actionTypes.js
export const ADD_ITEM = 'add_item'

// src/store/actionCreators.js
import { ADD_ITEM } from "./actionTypes";
export const getAddItemAction = (e) => ({
  type: ADD_ITEM
  value: e.target.value
})
// src/store/reducer.js
import { ADD_ITEM } from './actionTypes'

const defaultState = {
  inputValue: '',
  list: []
}
export default (state = defaultState, action) => {
  //这里改成ADD_ITEM
  if(action.type === ADD_ITEM) {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(newState.inputValue)
    newState.inputValue = ''
    return newState
  }
  return state;
}

Затем в App.js

//首先引入Action
import { getAddItemAction } from './store/actionCreators'
//修改响应函数
handleItemClick(e) {
    const action = getAddItemAction(e)
    store.dispatch(action)
}

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

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

Категории