Настройка Redux с реакцией

Автор оригинала: Ganpat kakar.

Реакция поставляется с встроенным государственным управлением для компонентов, используя это .state и this.setstate () Так почему нам нужно redux: – согласно документации redux, redux – это государственная библиотека управления, которая может использоваться в любом месте (реагировать js, угловые js, jQuery , Ваниль Джс). Но зачем нам нужен redux с реакцией: – реагировать на реакцию, имеет государственное управление для его компонентного уровня и однонаправленным потоком данных (данные/состояние могут быть переданы от родителя к компонентам для детей). Поскольку React не поддерживает данные, проходящие от ребенка на родитель, поэтому, если вы хотите получать данные между компонентами взаимодействия с братом, то это ударная работа. Один из способов: – коммуникационные компоненты взаимодействия взаимодействия взаимодействия для связи между CH1 (ребенок 1) и CH2 (ребенок 2), нам нужно передавать данные через родительский компонент, который в порядке для небольшого приложения, но когда иерархия компонентов увеличивается, тогда это способ Связь между братьями и сестрами неуместна и неэффективна. Второй способ – использовать контекст API. Вы можете прочитать больше о реактивном контексте в https://blog.bitsrc.io/why-you-should-consider-the-new-context-Api-dreact-a-deep-dive-d588b66c57b5 Эти обоих способами и подходит только для небольшого уровня приложений. Если приложение и никакие компоненты увеличиваются, то сложно управлять состоянием с этими обоими трюками. Так что решить эту проблему Redux – отличная библиотека. Подробнее о том, почему использовать Redux с реагированием на https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835, поэтому теперь начнет нашу реакцию для настройки React и Redux: – Наша главная цель состоит в том, чтобы настроить Redux с реакцией, чтобы вы могли использовать любую настройку RACTUP с созданием приложения RACT, или вы можете использовать мой блог Rect JS Securch Securch с WebPack @ https://medium.com/@kakarganpat/reach.com -js-endurge-setup-webpack-4787249BD5A0 Последняя настройка помещается в мою учетную запись GitHub @ https://github.com/ganpatkakar/react-redux-seed, поэтому теперь я надеюсь, что у вас уже есть настройка React начнутся с комбинирования Redux с реакцией. Во-первых, откройте свой терминал и напишите ниже команду: – Redux использует магазин, редукторы и действия. Магазин – это только для чтения, и единственным способом изменить, что через диспетку действия. Действие будет чистой функцией, и эти действия будут пойманы редукторами, где состояние будет изменено в соответствии с полезной нагрузкой на действие. Я знаю, что это немного запутанно, но медведь со мной мы увидим все это с примерами ниже. Итак, давайте сначала давайте настроим настроек: –

npm install --save redux react-redux

Поэтому нам нужно импортировать Redux для библиотеки redux и React-redux для подключения Redux с реакцией. Теперь создайте файл Store.js внутри SRC/Redux/и напишите ниже код в нем –

import { createStore, applyMiddleware} from 'redux';
import commonReducer from "./reducers/commonReducer";
let initialState = {};
export default createStore(commonReducer, initialState);

Здесь нам необходимо импортировать создание CreateStore и AnderyMiddleware, из библиотеки redux и commentreducter от редукторов (мы создадим наш редуктор через пару минут здесь ниже). Затем мы присваиваем пустой объект в виде InterialState для Redux. Если у вас есть некоторые данные для инициала, вы можете предоставить здесь. Затем мы экспортируем нашу функцию Createstore с параметрами в виде функции редуктора и начальное состояние. Эта функция вернет магазин каждый раз. Давайте подключим наш магазин Redux для реагирования.

index.js:-
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./redux/store";
import App from "./components/App";
const rootEl = document.getElementById("app");
ReactDOM.render(
  
    
  ,
  rootEl
);

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

App.js: –

import React, { Component } from 'react';
import myImage from "../assets/ganpat.jpg";
import { connect } from 'react-redux';
import {CommonAction} from '../redux/actions'
export class App extends Component {
render() {
    return (
        
            
                App Loads Here
            
        
    )
  }
}
export default App;

Это все еще не готово, как это даст ошибку для файла хранилища, поскольку у нас нет CommentReducter Imported. Так что теперь давайте создадим наш CommentReducer.js внутри SRC/Redux/Редукторы/CommentReducer.js

export default function commonReducer(state = {}, action) {
    switch (action.type) {
        case "INITIAL_STATE":
            return {
                ...state,
                ready: action.payload
            };
        default:
            return state
    }
}

Таким образом, здесь наша функция редуктора примет два параметра, состояние по умолчанию и действие (я знаю, что вы думаете, откуда придет этот параметр действий, поэтому нести со мной на пару секунд пойдут на действия Redux третьей важной части). Наши действия должны возвращать тип действия и данные полезных нагрузок. Давайте создадим наше действие, а затем мы вернемся к этому описанию редуктора позже. SRC/Redux/Действия/index.js

export function CommonAction (data) {
    return { type: INITIAL_STATE, payload: data }
}

Тас наши действия, поэтому действие – это чистый компонент, и он вернет то, что он попадет в параметре. Давайте вернемся к редуктору (CommentReducer.js): – Внутри нашей функции редуктора нам нужно проверить проверку на тип действий и принять обновление магазина в соответствии с нашим Action.Type. Redux всегда использует неизменяемый магазин, поэтому всякий раз, когда вы обновляете магазин, то всегда используйте функцию Spread Operator или Object.Assign () для хранения неможущейности. Так почему же нам нужно неизменное состояние – всякий раз, когда обновления магазина Redux, затем Redux сравните предыдущий магазин магазина и обновления. Если есть какие-либо изменения, то redux обновит магазин для реагирования и реагировать, будут обновлять компоненты в соответствии с новыми видами магазина. Сравнение предыдущего магазина магазина и обновления – это сложная работа, а для уменьшения сложности redux использует неизменного хранилища (неизменяемая операция объекта, всегда вернет новый объект с новой ссылкой в памяти). Для того, чтобы обновить состояние из компонентов RACT, нам нужно отправить действие от компонентов, давайте работать над диспетчером действий от компонентов: –

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {CommonAction} from '../redux/actions'
export class App extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        this.props.CommonAction(true);
    }
  render() {
    return (
        
            
                App Loads Here
            
        
    )
  }
}
const mapStateToProps = (state) => ({
    state: state
});
const mapDispatchToProps = dispatch => {
    return {
        CommonAction : (data) => dispatch(CommonAction(data))
    }
};

Export Connect Connect (MapStateTotoPOOPS, MAPDISPATSTOPOOPS) (APP), поэтому нам нужно сначала подключить наш компонент приложения с помощью Redux с использованием компонента React-redux Connect. Функция Connect примет два параметра в виде MapStatetOponops и MapDispatchtoponops. MapStatoPOPS добавит магазин redux в качестве опоры для текущего компонента и mapdispatchtoprops будет добавлять действия в реквизиты для компонента. Компонент Connect вернет функцию, которая примет текущее приложение компонента в качестве параметра. Мы импортировали общие действия из нашего файла/dux/Ancy/index.js. Мы отправим это действие на метод жизненного цикла ComponentDidmount. Теперь давайте начнем наше приложение, используя команду в терминале: –

npm start

Таким образом, наша веб-страница нагрузки с текстом «Приложение загружает здесь». Теперь, как проверить наш магазин Redux: –

Для настройки реагирования вы можете использовать React Google Chrome расширение-
Для Redux Google Chrome DEV-Tool-
Теперь вам нужно обновить наш файл Redux Store.js, как показано ниже: –

import { createStore, compose } from 'redux';
import commonReducer from "./reducers/commonReducer";

let initialState = {};

export default createStore(commonReducer,
    initialState,
    compose(window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
);

Теперь открыть Y наш браузер Chrome и перейдите в Localhost: 5000, щелкните правой кнопкой мыши и проверьте приложение. Вы найдете вкладку Redux, это место, где вы можете увидеть все действия, отправленные и изменения государства.

Давайте посмотрим наше действие «INATION_STATE» присутствует или нет: – redux dev-инструмент удлинение скриншот !!! Мы только что настроили и проверили Redux с реагированным.

Я поместил аналогичный или немного обновленного обновления в моем репозитории GitHub https://github.com/ganpatkakar/react-rexux-seed

Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий ниже, или вы можете связаться со мной прямо на kakarganpat@gmail.com.

Если вам нравится этот пост, пожалуйста, не забудьте хлопать

Читайте ещё по теме: