Redux

3566 ワード
インフラストラクチャ ノードの反応の基本的な知識を学習し、学習します。 テキストリンク

Reduxとは?


ステータス管理ライブラリ.JavaScriptプログラムの「予測可能状態」コンテナ
ステータス管理ツール
親コンポーネント、子コンポーネント、および子コンポーネントがあると仮定すると、すべての人が共通の管理データを持っていると仮定します.
Reduxを使用しない場合は、サブアセンブリでデータを更新するときに、そのステータス情報を親アセンブリに渡し、親アセンブリの親アセンブリでデータを渡す必要があります.つまり、プロセスは複雑です.
ただし、Reduxを使用すると、Redux Storeは複雑なプロセスを実行することなく、リポジトリのステータスを更新するだけで、ステータス管理をよりよく実行できます.

Props vs State


Props
  • の略語
  • コンポーネント間の通信にはPropsが必要です
  • 通信方式トップダウン(親->子)
    • 親構成部品から子構成部品に渡される値は、子構成部品では
  • を変更できません.
    <ChatMessages //자식 컴포넌트
	messages={message}
	currentMember={member} //부모 컴포넌트로부터 전달받은 정보
/>
    State
  • 素子内でのデータ交換には
    • を用いる.
  • が渡す値
    • を変更できます.
  • 値が変化する場合の再レンダリング
    • state={
    message:'',
    attachable:undefined,
    openMenu:false
};

    Reduxデータストリーム



    ポイントは一方向だけに流れることです.
    Action:何が起こったかを記述するオブジェクト
    {type: 'LIKE_ARTICLE',articleId:42} //42번 기사에 좋아요를 누름
{type: 'FETCH_USER_SUCCESS',response:{id:3,name:'Mary'}} //유저 가져오는 것 성공
{type: 'ADD_TODO',text:'Read the Redux docs.'} //해당 텍스트를 todo 리스트에 추가
    Reducer:Actionは、アプリケーションのステータスがどのように変化するかを示します.前の状態と変更された状態を返します.
    (previousState,action)=>nextState
    Store:アプリケーション全体のステータスを保護します.メソッドが含まれており、ステータスをメソッドで管理できます.

    Redux設定


    フォルダをcd clientに移動します.npm install redux react-redux redux-promise redux-thunk --saveを使用して必要な依存項目をインストールします(redoxをよりよく使用できます).
    redux-profile:dispatch(action)、承諾の受け入れ方法をお知らせします
    redux-thunk:dispatch(action)関数の受信方法を示しますindex.js 
    import {Provider} from 'react-redux';
import 'antd/dist/antd.css';
import { applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import reduxThunk from 'redux-thunk';
import Reducer from './_reducers';

const createStoreWithMiddleware= applyMiddleware(promiseMiddleware,reduxThunk)(createStore);

ReactDOM.render(
   //redux와 어플리케이션 연결. 현재의 어플리케이션을 감싸줌
  <Provider
    store={createStoreWithMiddleware(Reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
      )}
  >
    <App />
  </Provider>,
  document.getElementById('root')
);

//생략
    ./reducers/index.js 
    //여러개의 Reducer를 combineReducers를 이용해서 하나로 합쳐줌
import {combineReducers} from 'redux';
//import user from './user_reducer';

const rootReducer=combineReducers({
    //user,
});

export default rootReducer;

    リファレンス


    www.inflearn.com/course/学習-ノード-反応-基本
    ElasticSearch単機間インデックスデータ移行ノート
    共通認識プロジェクト機能ドキュメントとディレクトリ構造の作成