Redux - это библиотека управления состоянием для приложений React, поскольку она помогает управлять состоянием приложения в одном объекте, это означает, что все состояние приложения находится в одном объекте.

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

Лучшие ноутбуки для программирования

Вот почему мы пишем его с нуля.

Создайте файл store.js в своем приложении React.

Во-первых, нам нужно создать функцию отправки, функцию подписки, функцию преобразования

1. функция getState помогает получить текущее состояние приложения.
2. thunk используется для выполнения aysnc вещей, вы даже можете отложить сетевой запрос.

создать файл reducers.js

Редуктор

когда мы отправляем действие, оно дает новое состояние приложения вместо изменения старого состояния.

Как подключить наш redux к приложению React?

откройте файл index.js и импортируйте подписку из магазина, то есть вы подключены к магазину, как я сделал в приведенном ниже коде.

import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
import { subscribe } from './store';

subscribe(()=>render(
  <App />,
  document.getElementById("root")
))

Теперь давайте реализуем счетчик и задачу и отправим несколько сетевых запросов, чтобы мы могли знать, что наш redux работает правильно или нет.

todo.js файл

в приведенном выше коде сначала мы импортировали getState и dispatch из магазина.

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

файл counterbuttons.js

import React from "react";
import {dispatch} from './store'

function Inc() {
    dispatch({
        type: 'INC'
    })
}
function Dec() {
    dispatch({
        type: 'DEC'
    })
}

const width = { width: '2rem' ,fontSize:'1.2rem'}

const CounterButtons= () => (
  <div>
    <button onClick={Inc} style={width} >+</button>
    <button onClick={Dec}  style={width} >-</button>
  </div>
);

export default CounterButtons;

Пришло время отправлять сетевые запросы с помощью преобразователей, а преобразователи используются для выполнения сетевых запросов.

создать файл thunks.js

import { dispatch, thunk } from "./store";
import axios from "axios";

export const users = () => thunk(
    function (res) {
        dispatch({
            type: "GET_USERS",
            users: res.data
        });
    }, (cb) => {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => cb(response)) 
            .catch(err => cb({ err:'Error occurred'}))
    },5000 //delay time
)

Функция thunk принимает три аргумента, первые два - функции обратного вызова, последний
аргумент - задержка и не является обязательным.

в первой функции обратного вызова вам нужно вызвать отправку с типом действия и полезной нагрузкой

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

Компонент FetchData

import React from "react";
import { getState } from "./store";
import { users } from "./thunks";

function Loading() {
  return <h1 style={{ color: "red" }}>Loading</h1>;
}

class FetchData extends React.Component {
  componentDidMount() {
    users();
  }
  Users = () => {
    if (getState().users) {
      return getState().users.map(user => (
        <ul key={user.id}>
          <li>{user.name}</li>
          <li>{user.email}</li>
        </ul>
      ));
    } else {
      return <h1 style={{color:'red'}}>Delaying request for 5seconds</h1>;
    }
  };

  render() {
    return (
      <div>
        <ul>
          <li>{getState().data ? getState().data : <Loading />}</li>
        </ul>

        <hr />
        <h1>Users</h1>
        <hr />

        {this.Users()}
      </div>
    );
  }
}

export default FetchData;

вот и все, мы закончили с созданием всех компонентов.

Теперь нам нужно импортировать эти компоненты в файл App.js, потому что наше приложение не знает об этих компонентах.

Файл App.js

Hoo успешно завершено

окончательный результат

Надеюсь, вам понравилось… 👍🏻

Репозиторий кода

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ План развития веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .