Redux 101: Введение в управление состоянием в приложениях React

Во-первых, давайте посмотрим, как создать хранилище Redux и передать его вашим компонентам React:

import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

В этом коде мы используем метод createStore из Redux для создания нового хранилища, а затем используем компонент Provider из React-Redux для передачи хранилища нашим компонентам React. Это позволяет нашим компонентам получать доступ к хранилищу и отправлять действия для обновления состояния.

Далее давайте посмотрим, как отправить действие для обновления состояния в Redux:

import { connect } from 'react-redux';

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.dispatch({
      type: 'ADD_ITEM',
      payload: 'my item'
    });
  };

  render() {
    return (
      <button onClick={this.handleClick}>Add Item</button>
    );
  }
}
export default connect()(MyComponent);

В этом коде мы используем функцию connect из React-Redux для подключения нашего компонента React к хранилищу Redux. Это позволяет нам получить доступ к функции dispatch в качестве реквизита в нашем компоненте. Затем мы используем эту функцию для отправки действия с типом ADD_ITEM и полезной нагрузки, содержащей элемент, который мы хотим добавить.

Наконец, давайте посмотрим, как обрабатывать это действие в редюсере Redux:

const initialState = {
  items: []
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        items: [...state.items, action.payload]
      };
    default:
      return state;
  }
}
export default rootReducer;

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

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