Можете привести пример простого приложения, использующего Redux и React?

Question

AstralArchitect

redux , react

Можете привести пример простого приложения, использующего Redux и React?

Ищу примеры приложений на React + Redux (без использования toolkit), где есть два компонента: по нажатию кнопки отправляется запрос на сервер, полученные данные сохраняются в Redux, и выводятся в другом компоненте. Ранее написанный мной код не работает должным образом, поэтому интересуюсь готовыми примерами. К сожалению, не удалось найти подобных примеров в интернете. Если у кого-то есть такой пример приложения, прошу поделиться. Спасибо!

24 октября 2023 г. 17:08

Ответы на вопрос 1

Похожие вопросы

Answer 1

Конечно, вот пример простого приложения, использующего Redux и React:

```javascript
// store.js

import { createStore } from "redux";

// Задаем начальное состояние
const initialState = {
  data: null,
};

// Редьюсер
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "GET_DATA":
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

// Создаем хранилище
const store = createStore(reducer);

export default store;
```

```javascript
// actions.js

export const getData = (data) => {
  return {
    type: "GET_DATA",
    payload: data,
  };
};
```

```javascript
// App.js

import React from "react";
import { connect } from "react-redux";
import { getData } from "./actions";

class App extends React.Component {
  handleClick = () => {
    // Отправляем запрос на сервер
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => {
        // Сохраняем полученные данные в Redux
        this.props.getData(data);
      });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Получить данные</button>
        {this.props.data && <DataComponent data={this.props.data} />}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    data: state.data,
  };
};

export default connect(mapStateToProps, { getData })(App);
```

```javascript
// DataComponent.js

import React from "react";

class DataComponent extends React.Component {
  render() {
    return <div>{JSON.stringify(this.props.data)}</div>;
  }
}

export default DataComponent;
```

Основная идея заключается в том, что мы используем `connect` из `react-redux` для связи компонента `App` с Redux. Когда нажимается кнопка, мы отправляем запрос на сервер, сохраняем полученные данные в Redux с помощью `getData` из `actions.js` и эти данные выводятся в компоненте `DataComponent`.