Redux構成部品からストレージ領域へのステータス値の保存

13032 ワード

テキストリンク

🎁 Redux

predictable state container for JS apps
ステータス管理ライブラリ

はんのうげんかい

リアクターは、データの変化に伴うレンダリングを管理するライブラリです.
UIをコンポーネントに分けて実装すると管理状態が難しくなり,その状態に関するデータを各コンポーネントに一括して渡すことも面倒になる.
reduceはステータス管理用のJSライブラリであり,これらの問題を解決することができる.

もう一度よく観察してください.
反応器を用いてプロジェクトを行う場合、必要なデータはサブアセンブリpropsの形で伝達される.

素子が多ければ多いほど、サブ素子を介してデータを伝達することが面倒になり、独立してデータを読み出したり修正したりして更新することが困難になる.特に、子構成部品は親構成部品から直接データを読み込むことはできません.

構成部品管理ステータスとは独立

Reduxは、storeという名前のステータスを管理するためにグローバルコンテナを作成し、使用します.
すなわち、構成部品外部とは独立して状態値を管理することができる.

🎁 Redux data flow

storeにはstateデータとreduceメソッドがあります.データを変更すると、コンポーネントはactionを発行し、必要なデータを取得します.

store

ステータスを保存する場所、stateのキャラクターを保護します.
storeにはステータスを管理する方法がたくさんあります.
storeにはstateデータとreduceメソッドがあります.データを変更すると、コンポーネントはactionを発行し、必要なデータを取得します.

const store = {
    "State":{
        "session": data,
        "other": things
    },
    "Reducer":{
        "sessionReducer": func to change session data,
        "otherReducer": func to change other data
    }
}

Action(リポジトリに送信するメッセージ)

客体形式で、何が起こったのかを説明する.

dispatch（状態修正インタフェース）

ステータスが変更されると、dispatchはstoreを呼び出し、storeにどのような変更が行われるかの情報が含まれます.

Reducer(アクションアナライザ)

前のstateとaction objectを受信したらnext stateを返します.

(previousState, action) => nextState

前の状態値がpreviousStateであることを示します.このactionが次の状態nextStateになります.

🎁 プロセス

店舗は상태を所有しています.

要素は、dispatch関数によって動作をリダイレクトに転送する.

ステータスはReducerによってのみ変更でき、構成部品はこのステータスを購読します.

また、ミドルウェアは、再生と動作の間で特定の役割を使用し、非同期タスクなどを処理する.

🎁 使用方法

ステータスの定義

初期値は0に設定されています.

export const INIT_COUNT_STATE = {
    value: 0
};

アクションの定義

Action(storeに渡すメッセージ)は、何が起こったのかをオブジェクトとして記述します.
ステータス値変更のアクションを定義するには
ここでactionの初期値が+または-の増減関数をそれぞれ定義します.

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

export function increment() {
    return {
        type: INCREMENT
    };
}

export function decrement() {
    return {
        type: DECREMENT
    };
}

減速機の作成

(アクションアナライザ)
前のstateとaction objectを受信したらnext stateを返します.

(previousState, action) => nextState

前の状態値がpreviousStateであることを示します.このactionが次の状態nextStateになります.
以前に定義したステータス値を使用して初期化され、アクションに基づいてステータス値を変更する内容が作成されます.
すなわち,以前に定義した初期値と動作をパラメータとしてインポートし,これらの初期値/状態をどのように変更するかを動作のタイプに応じて記述する.
ここでは、0から始まる状態が、actionの状態がIncrementの場合はstate++、Decrementの場合はstate--となるように状態変更方法を定義します.

import { INIT_COUNT_STATUS } from '../status/count'
import { INCREMENT, DECREMENT } from '../actions/count';
import { combineReducers } from 'redux';

function counter (state = INIT_COUNT_STATUS, action) {
    switch(action.type) {
        case INCREMENT:
            return {
                ...state,
                value: state.value + 1
            }
        case DECREMENT:
            return {
                ...state,
                value: state.value - 1
            }
        default:
            return state
    }
}

const counterReducer = combineReducers({ counter });

export default counterReducer

Combined Reducersは、複数のサブルーチンを1つに統合します.このプロセスでは、オブジェクトを関数に渡し、オブジェクト構造に基づいてマージされたリーダー状態の構造を作成します.

チェーン店

store構成が完了したら、コンポーネントで使用する必要があります.使用するには供給者が庇護しなければならない.また、ステータス値を購読するコンポーネントにはconnectという関数が使用されます.


import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider  } from 'react-redux';

import App from './App';
import CountReducer from './redux/reducer/count';

const store = createStore(CountReducer);

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