反応さえよければ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
spread演算子:https://paperblock.tistory.com/62