ReduxとReact


反応さえよければReduxを書けば管理状態の方が便利かと思います.
よく勉強しなさい.整理しないと頭の中に残らないので、私のようなニュービーに助けてほしいと思い、私に特に役に立つようにReduxを勉強しました.
まずReduxを理解してからReact-Reduxを理解します

なぜReduxが必要なのですか?


1.構成部品が多いほど、利益が多くなります.
Reactで構成部品を作成してステータスを管理する場合、最大の問題は、構成部品が大量に増加した場合、これらのステータスをどのように管理するかです.Propsは?どうしよう.ReduxはStoreだと思ったjsではStateを集中的に管理することでこの部分を解決する
2.バージョン管理可能
これは本当に驚くべき部分で、拡張ツールを使用して状態の変化したストリームをビデオのように表示し、その時の機能に戻ることができます.本当に蜜ですね.
このため、ステータスをすぐに変更せずにコピーし、新しいステータスを作成できます.
Object.assignを使用するか、拡張オペレータ{..state}を使用してコピーして更新します.(例を参照)
  • このようにして,開発者ツールではタイムマシンのように状態を切り替えることができる.
  • ReactからState-SetStateに変更したように、変更は変更されません.
  • if (action.type === 'INCREMENT') {
        return { ...state, number: state.number + action.size };
      }

    Reduxフルフロー


    次のプロセス全体を理解することが重要なようです.各単語の意味を理解し、その役割を理解し、その働き方を理解します.

    こうりゅう

  • Storeという名前のスペースを作成し、State(オブジェクト)を保存します.
  • UIでは、ユーザに何らかの動作がある.
  • Dispacch動作
  • をReducerへ送信する.
  • Reducerは、アクションのタイプに応じて実行する文を決定する.
  • ストレージ領域のステータス値を置き換えるのではなく、新しいステータス値をstoreにコピーして保存します.
  • の記憶領域に変更されたステータス値が保存されている場合、Dispatchはsubscribe(render)を呼び出してrenderに新しいステータス値を渡すことによってレンダリングされます.
  • Store

  • ショップは保存状態の場所です.
  • getState()アクセス状態により、
  • dispatch(action)によって状態を修正する;
  • subscribe(listener)でテナントを登録します.
  • アプリケーションごとに1つしか作成できません.
  • 外部から直接Storeにアクセスし、Stateを取得することができず、Reducerでアクセスします.
  • import { createStore } from 'redux';
    
    export default createStore(function (state, action) {
      return state;
        //store 생성, Reducer 생성, reducer는 항상 state를 반환함//
    }
    createStoreでショップを作成してステータスを保存/管理します.
    // 초기 상태를 기록
    console.log(store.getState());
    
    // 상태가 바뀔때마다 기록
    let unsubscribe = store.subscribe(() =>
      console.log(store.getState())
      )

    Reducer

  • Reducerは動作による状態変化の関数である.
  • をパラメータとして、常に現状、行動を受け入れ、動作に応じて新しい状態に戻る.
  • 純関数(Date.now()またはMathを使用します.ランダム()関数呼び出しX)
  • API呼び出しやルーティング変換などバイパス効果を生じない
  • 初期状態の設定


    Case 1
    function todoApp(state, action) { 
    if (typeof state === 'undefined') {  
    return initialState  }  
    // 지금은 아무 액션도 다루지 않고  // 주어진 상태를 그대로 반환합니다. 
    return state
    }
    Case 2
    ES 6 default arguments構文を使用して書き方を簡略化する方法
    ->No value/undefined値はpass(無視)
    function todoApp(state = initialState, action) { 
    return state
    }

    Reducerの例

    function todoApp(state = initialState, action) {
      switch (action.type) {
      case SET_VISIBILITY_FILTER:
        return Object.assign({}, state, {
          visibilityFilter: action.filter
        });
      default:
        return state
      }
    }
    以上のコードは,現在の状態を受信し,スイッチングゲート/状態でコピーし,動作に応じて新しい状態を反映するコードである.

    注意事項

  • Object.assign(state,{visibility Filter:action.filter})も正しくありません.Stateが変更されるため、最初に空のオブジェクトを含める必要があります.
  • ...stateで記入することもできます!(拡張オペレータ)*参考資料
  • の不明なアクションの場合は、defaultで元の値を返す必要があります.
  • Dispatch

  • 動作が発生した場合、Reducerを呼び出して状態変化の関数を起動する.
  • 示すように、動作はパラメータとしてtype(必須)と返す値(size)を含む.
    Typeではどのような役割を果たすかを示します.類名のように聞こえる
    store.dispatch({ type: 'INCREMENT', size: size });

    Action Creater

  • パラメータを受信し、アクションオブジェクトとしてアクション関数を作成します.
  • アクションオブジェクトを直接作成することもできます.
  • export function addTodo(text) {
      return {
        type: "ADD_TODO",
        text
      };
    }
    
    //text를 인자로하는 Action Creater//
    
    dispatch(addTodo(text))
    //액션을 담아서 dispatch 호출함//
    
    //아니면 자동으로 액션을 보내주는 바인드된 액션 생산자를 만들수 있음//
    const boundAddTodo = (text) => dispatch(addTodo(text))
    
    //바로 호출가능//
    boundAddTodo(text)
    

    Subscribe

  • Storeの内蔵関数の1つです.
  • パラメータとして
  • 関数形式で使用します.
  • アクションが派遣されるたびに、伝達された関数が呼び出されます.
  • React-Redux(ライブラリ)接続関数を使用して
  • を購読

    モジュールの作成例


    *モジュール:ActionType、ActionCreator、Reducerを含むファイル
    /* 액션 타입 만들기 */
    // Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요.
    // 이렇게 하면 다른 모듈과 액션 이름이 중복되는 것을 방지 할 수 있습니다.
    const SET_DIFF = 'counter/SET_DIFF';
    const INCREASE = 'counter/INCREASE';
    const DECREASE = 'counter/DECREASE';
    
    /* 액션 생성함수 만들기 */
    // 액션 생성함수를 만들고 export 키워드를 사용해서 내보내주세요.
    export const setDiff = diff => ({ type: SET_DIFF, diff });
    export const increase = () => ({ type: INCREASE });
    export const decrease = () => ({ type: DECREASE });
    
    /* 초기 상태 선언 */
    const initialState = {
      number: 0,
      diff: 1
    };
    
    /* 리듀서 선언 */
    // 리듀서는 export default 로 내보내주세요.
    export default function counter(state = initialState, action) {
      switch (action.type) {
        case SET_DIFF:
          return {
            ...state,
            diff: action.diff
          };
        case INCREASE:
          return {
            ...state,
            number: state.number + state.diff
          };
        case DECREASE:
          return {
            ...state,
            number: state.number - state.diff
          };
        default:
          return state;
      }
    }

    reducerが2つ以上ある場合


    1つのアイテムに複数のリダイレクトがある場合は、ROOT REDUCERを使用します.
    統合リスナーの操作は、リスナーに組み込まれたコンビネーションリスナーという関数を使用します.

    Root Reducerの作成

    import { combineReducers } from 'redux';
    import counter from './counter';
    import todos from './todos';
    
    const rootReducer = combineReducers({
      counter,
      todos
    });
    
    export default rootReducer;

    ストレージに適用

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import { createStore } from 'redux';
    import rootReducer from './modules';
    
    const store = createStore(rootReducer); // 스토어를 만듭니다.
    console.log(store.getState()); // 스토어의 상태를 확인해봅시다.
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    serviceWorker.unregister();
    Redux~リラックスしてくれてありがとう~

    React-Redux


    反応器ユーザー、反応器にどのように適用するかを理解しました.

    プレゼンテーション、コンテンツ構成部品


    ReduxのReactバインドは,表現とコンテンツ要素を分離する方式を採用している.2つの素子の特性から始めましょう.

    コンポーネントがUIを担当し、データ操作に関与しないことを示します.
    containerコンポーネントは、データ操作を担当し、それらの動作方法を理解します.React-ReduxはConnect()関数を使用してコンテンツを作成します.

    せつぞくかんすう


    表示関数とReduxを接続するにはcontainer関数を作成する必要があります.自分で作成できますが、正式なドキュメントではReact Reduxライブラリに組み込まれているConnect関数を使用してContainerコンポーネントを作成することを推奨します.-->余計なレンダリングを防ぐことができるので

    接続()に必要な関数


    上記の接続()を使用するには、2つの関数を定義する必要があります.
  • MapStateToProps():ステータス依存(Ex.State)-->props(コンポーネント)
    この関数は、現在のReduxストアのステータスをステータスに変換する方法と、表示コンポーネントに渡すプロパティを作成します.
  • const getVisibleTodos = (todos, filter) => {
      switch (filter) {
        case 'SHOW_COMPLETED':
          return todos.filter(t => t.completed)
        case 'SHOW_ACTIVE':
          return todos.filter(t => !t.completed)
        case 'SHOW_ALL':
        default:
          return todos
      }
    }
    
    const mapStateToProps = state => {
      return {
        todos: getVisibleTodos(state.todos, state.visibilityFilter)
      }
    }
    VisibleToDoListコンポーネントはtodosをフィルタリングしてTodoListに渡す必要があるため、state.ステータスは可視フィルタに依存します.todosをフィルタする関数を作成し、mapstateToPropsとして使用できます.
    2.mapDispatchToProps():動作関連
    この関数を使用してStoreにアクションを送信できます.Dispatch()をパラメータとしてコールバックからなる属性を返すと、その属性は表示素子に注入されます.
    const mapDispatchToProps = dispatch => {
      return {
        onTodoClick: id => {
          dispatch(toggleTodo(id))
        }
      }
    }
    VisibleToDoListはonToDoClick属性をToDoListに注入し、onToDoClick関数にTOGLE TODO動作を割り当てます.

    Containerの作成


    以前にmapStateToProps、mapDispatchToProps関数が作成されていた場合は、ConnectでVisibleToDoListが生成されます.
    import { connect } from 'react-redux'
    
    const VisibleTodoList = connect(
      mapStateToProps,
      mapDispatchToProps
    )(TodoList)
    
    export default VisibleTodoList

    Provider

  • React-Redoxライブラリで以前に作成するConstatier構成部品はすべて、リポジトリとリポジトリの連携を支援する構成部品
  • である.
  • Providerを招待して、それを連動するComponentと一緒に包んで、propsでstoreを設定して終わりました!
  • import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import {Provider} from 'react-redux';
    import store from './store';
    
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>
    , document.getElementById('root'));
    出典:https://react.vlpt.us/redux/04-make-modules.html![](https://media.vlpt.us/images/kms0206/post/6c913daf-d90c-414b-bbab-a0b0733fada2/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-10-20%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.03.15.png)
    spread演算子:https://paperblock.tistory.com/62