Добавить Redux в проект React

Question

Добавление избыточного числа в проекте React (Рефакторинг простого проекта с Redux)

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

В реальном сценарии мы используем состояние для удержания значения счетчика следующим образом:

in App.js :

import React, {Component} from 'react';
import CounterApp from './CounterApp'

class App extends Component {
  render() {
    return (
      <CounterApp/>
    );
  }
}

export default App;

in CounterApp.js :

import React, {Component} from 'react';

class CounterApp extends Component {
  state = {
    counter: 0
  };

  handleIncrement = () => {
    this.setState(prevState => ({
      counter: prevState.counter + 1
    }))
  };

  handleDecrement = () => {
    this.setState(prevState => ({
      counter: prevState.counter - 1
    }))
  };

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>Increment</button>
        <p>{this.state.counter}</p>
        <button onClick={this.handleDecrement}>Decrement</button>
      </div>
    );
  }
}

export default CounterApp;

Простой и базовый пример, который реализуется с помощью компонента класса реакции и обрабатывается двумя обработчиками функций (handleIncrement и handleDecrement)

и state со значением counter

Я использую prevState, потому что это лучший метод, когда вы вынуждены использовать this.state. в setState!

А что это за реализация с Redux ?

Answer 1

Прежде всего, вам необходимо установить redux и response-redux в ваш проект через npm или yarn.

Вы можете просто установить их с помощью одной строки кода:

npm install redux react-redux --save

или с пряжей:

yarn add redux react-redux

Теперь вернитесь к проекту и создайте 3 файла с такими именами:

action.js, reducer.js и store.js

открыть action.js файл. Мы должны реализовать два действия для этого приложения. Один для увеличения и один для уменьшения.

in action.js

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
const DECREMENT_COUNTER = 'DECREMENT_COUNTER';

const increment = () => ({type: INCREMENT_COUNTER});
const decrement = () => ({type: DECREMENT_COUNTER});

export {
  INCREMENT_COUNTER,
  DECREMENT_COUNTER,
  increment,
  decrement
}

действия - это простые функции, которые передаются от компонента к редуксу для изменения store (состояния) с помощью редукторов.

поэтому мы должны изменить reducer.js :

import {INCREMENT_COUNTER, DECREMENT_COUNTER} from "./action";

const initialState = {
  counter: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case(INCREMENT_COUNTER):
      return {
        ...state,
        counter: state.counter + 1
      };
    case (DECREMENT_COUNTER):
      return {
        ...state,
        counter: state.counter - 1
      };
    default:
      return state
  }
};

export default reducer

Существует 3 основных принципа использования редукса:

1- Единственный источник правды. Состояние всей вашей заявки хранится в дереве объектов в одном магазине.

2- Состояние только для чтения. Единственный способ изменить состояние - это выброс действие, объект, описывающий то, что произошло.

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

в соответствии со вторыми принципами, мы должны предполагать, что состояние является неизменным, и каждый случай (в переключателе) должен возвращать состояние индивидуально. Использование ... состояния в возвращенном состоянии означает, что если initialState изменится в будущем, эти случаи будут работать правильно (в этом примере это не обязательно).

наши функции в действиях чисты (3-й принцип)

и для последнего нового файла store.js :

import {createStore} from "redux";
import reducer from './reducer'

const store = createStore(reducer);

export default store;

теперь мы должны применить этот магазин к нашему компоненту приложения. поэтому откройте файл App.js и внесите следующие изменения:

in App.js :

import React, {Component} from 'react';
import CounterApp from './CounterApp'
import {Provider} from 'react-redux'
import store from './store'

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <CounterApp/>
      </Provider>
    );
  }
}

export default App;

Поставщик обернул компонент CounterApp и распространит store на App и CounterApp и все другие дочерние компоненты.

наконец, измените CounterApp.js :

import React, {Component} from 'react';
import {connect} from "react-redux";
import {increment, decrement} from "./action";

class CounterApp extends Component {

  handleIncrement = () => this.props.dispatch(increment());

  handleDecrement = () => this.props.dispatch(decrement());

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>Increment</button>
        <p>{this.props.counter}</p>
        <button onClick={this.handleDecrement}>Decrement</button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  const counter = state.counter;
  return {counter}
};

export default connect(mapStateToProps)(CounterApp);

мы используем increment & decrement действия для отправки действий в редукцию.

state был удален, и вместо состояния мы создаем специальную функцию mapStateToProps' and use connect` для подключения состояния к реквизитам компонентов.

Готово!