React Redux を 1 ページでゼロから理解する

6565 ワード
javascript reactnative react redux テキストリンク
人気のある React および React Native 状態管理ライブラリを Redux します.
これは1ページのreduxのすべてのコンポーネントです

npx create-react-app reactapp


cd 反応アプリ

yarn add react-redux


これを index.js に追加します

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { createStore } from "redux";
import allReducer from "./reducers";

//ACTION  -> INCREMENT (describes what you want to do!) it's a simple function

const increment = () => {
    return {
        type: "INCREMENT",
    };
};

const decrement = () => {
    return {
        type: "DECREMENT",
    };
};

//REDUCER -> (action transfer from one state to another state, it gonna modify our store)
//You can have many reducers (Auth reducer, Movielist reducer etc ...)
const counter = (state = 0, action) => {
    switch (action.type) {
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
    }
};

//STORE  -> Globalized STATE
let store = createStore(counter);

//Display it in the console.
store.subscribe(() => console.log(store.getState()));

//DISPATCH (DISPATTCH this action to the reducer)
store.dispatch(increment());
store.dispatch(decrement());
store.dispatch(increment());

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root")
);

reportWebVitals();


テスト: inspect でコンソールをチェックして、どのように増減するかを確認します.

Github Repo より高度な方法については、次を参照してください.
https://github.com/Byusa/learn-redux

このレポは、ストアと複数のレデューサーが独自のフォルダーを使用する適切な方法の 1 つである可能性がある redux の使用を示しています.

参照:
Sparkラーニング(masterノードで外部サービスを提供)
tcode - Two Sum