Úvod

Toto je druhý příspěvek ze série:Směs Redux a ReactJs – snadné řízení stavu!

Pokud jste již spokojeni se základními koncepty Redux, skvělé! Pokud s Reduxem teprve začínáte, rád bych vás povzbudil, abyste si přečetli první příspěvek této série:

Redux a ReactJs:Pojďme vytvořit aplikaci Counter

Jak se říká:„Malá změna vyhrává velké věci “, zaměřme se na malou a jednoduchou aplikaci Counter App pomocí konceptů Reactjs a Redux. V budoucím příspěvku série uděláme stejnou aplikaci o něco složitější a zábavnější.

Tady je malý náhled na to. Je to tak jednoduché:

Postavte to krok za krokem – připravte základy

Budeme používat aplikaci Create React k vytvoření nové aplikace React, abychom se soustředili na učení, které máme po ruce, než na jiné hlouposti.

✔️ Vytvořte strukturu aplikace a přepněte se do adresáře aplikace.

 npx create-react-app blend-redux-react
 cd blend-redux-react/

✔️ Nainstalujte redux a react-redux knihovny.

yarn add redux react-redux --save

React-redux je oficiální vazba React pro Redux. Nedávná aktualizace s háčky dělá věci neuvěřitelně jednodušší, jak uvidíme za chvíli.

V tuto chvíli je vaše package.json soubor musí mít tyto (verze se však mohou lišit):

✔️ Vyčištění:Jako create-react-app přichází se spoustou standardních, které nebudeme používat, pojďme udělat nějaké vyčištění. Odstraňte věci z App.js soubor takový, že má pouze tyto:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1> Blend Redux with ReactJS </h1>
    </div>
  );
}

export default App;

Je čas spustit aplikaci takto:

yarn start

Tím by se měl spustit prohlížeč a aplikace @ http://localhost:300 :

Aplikace Counter na začátku

Sestavte to krok za krokem – zahrňte Redux do aplikace

Nainstalovali jsme redux v předchozím kroku. Nejprve vytvoříme dvě základní komponenty reduxu, action a reducer .

✔️ Vytvořte dvě složky s názvem akce a reduktory pod src a vytvořte soubory, jak je znázorněno na tomto obrázku:

✔️ Upravte index.js soubor v části akce složku a přidejte následující akce:

export const increment = () => {
    return {
        type: 'INCREMENT'
    }
};

export const decrement = () => {
    return {
        type: 'DECREMENT'
    }
};

Pro naši aplikaci Counter potřebujeme dvě akce, INCREMENT a DECREMENT .

✔️ Všichni jsme připraveni na akce. Vytvoříme redukci. Jak jste viděli v příspěvku o základních konceptech React, reducers jsou skutečně zodpovědní za provedení akcí a změnu stavu. Vytvoříme redukci pro zvýšení a snížení počtu.

vytvořte soubor s názvem counter.js jak je znázorněno na obrázku níže:

Vytvoříme redukci jako:

const counterReducer = (state = 0, action) => {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state -1;
        default:
            return state;
    }
}

export default counterReducer;

Děje se tu pár věcí,

• Stav počtu je inicializován na nulu.
• Akce máme jako další parametr, takže můžeme zvyšovat a snižovat stav na základě type akce .
• Pokud nebyly provedeny žádné akce, vrátíme pouze výchozí hodnotu stavu, která je nula.

✔️ Super, takže máme náš reduktor připravený. Ale počkat, co když máme v aplikaci více reduktorů? Můžeme je spojit do jednoho, aby bylo možné exportovat a importovat jako jeden?

Proč ne? Můžeme použít combineReducers od redux dosáhnout stejného. Upravte index.js soubor pod reducers složku pro přidání tohoto kódu:

import counterReducer from './counter';
import { combineReducers } from 'redux';

const allReducers = combineReducers({
    counter: counterReducer
});

Poznámka:Vytváříme klíč pro counterReducer takže můžeme použít ten zkratkový klíč k volání našeho reduktoru. To uvidíme za chvíli. Představte si, že máme další redukci s názvem 'userReducer'. V takovém případě allReducers být vytvořen jako,

const allReducers = combineReducers({
    counter: counterReducer,
    user: userReducer
});

Postavte to krok za krokem – co říkáte na Obchod?

Dobře, co takhle Obchod? Kde to vytvoříme? Pamatujete si, že chceme vytvořit obchod a zpřístupnit ho celé aplikaci? Tato myšlenka nás zavede na index.js kde aplikaci zavádíme jako,

ReactDOM.render(
        <App />,
    document.getElementById('root')
);

✔️ Za prvé, pojďme vytvořit obchod Redux, abychom mohli poskytovat obchod na App .

import { createStore } from 'redux';
import allReducers from './reducers';

const store = createStore(allReducers);

Takže používáme naše redukce a vytváříme Store .

✔️ Poskytněte aplikaci Store:Jak jsme vysvětlili, react-redux je pojivo React with Redux, poskytuje mechanismus (pomocí Provider ), abyste poskytli obchod vašim reakčním komponentám. Zde je návod, jak poskytujeme obchod našemu App přidáním tohoto kódu do index.js soubor.

import { Provider } from 'react-redux';

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

Sestavte to krok za krokem – pojďme to zabalit do App.js

No, vytvořili jsme akce, redukce a obchod. Obchod je také dostupný pro naše App komponent. Využijme toho a postavme interaktivní počítadlo.

✔️ V App.js přidáme 2 tlačítka, jedno pro zvýšení a druhé pro snížení. Přidáme také zástupný symbol pro tisk hodnoty Counter, jak je uvedeno níže:

return (
    <div className="App">
      <h1> Blend Redux with ReactJS</h1>
      <h1>Counter: 0</h1>
      <button>+</button>
      <button>-</button>
    </div>
  );

✔️ Budeme používat dva speciální háčky od react-redux do,

• Načíst stav z obchodu pro jeho čtení.
• Odeslání akce tak, že reduktor na ni působí na základě typu akcí.

Nejprve je tedy importujeme:

import { useSelector, useDispatch } from 'react-redux';

Také importujte akce, protože je musíme odeslat kliknutím na tlačítko. Zde je postup App komponenta vypadá takto:

import { increment, decrement} from './actions';
import { useSelector, useDispatch } from 'react-redux';

function App() {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1> Blend Redux with ReactJS</h1>
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

To je vše! Kliknutím na tlačítko odešlete akce. Dispečerské akce změní stav v obchodě pomocí Reduktoru. Vybereme hodnotu stavu čítače a vykreslíme ji v naší komponentě.

Co takhle ladění?

Tuto aplikaci můžete ladit stejným způsobem, jakým byste ladili jakoukoli webovou aplikaci založenou na Reactu. Ale tady je úžasné rozšíření Chrome pro Redux.

• Nainstalujte si jej odtud pro prohlížeč Chrome.
• Nyní jej naleznete v možnostech nástroje Chrome Developer Tool jako Redux .

• Upravte createStore zavolejte index.js soubor tímto způsobem povolíte možnost ladění pro vaši aplikaci,

  // Pay attention to the second parameter.
  const store = createStore(
    allReducers, 
    window.__REDUX_DEVTOOLS_EXTENSION__ && 
    window.__REDUX_DEVTOOLS_EXTENSION__()
  );
  

Díky tomu budete moci snadno sledovat změny stavu a ladit věci. Zde je ukázka aplikace Counter, kterou jsme právě vytvořili.

Kód

Vše, co jsme doposud udělali, najdete v mém GitHub Repo.

Doufám, že se vám příspěvek líbil. V příštím příspěvku budeme strukturovat aplikaci s více komponentami a spravovat stav ve složitějším scénáři. Zůstaňte naladěni.