ReduxとReact
30505 ワード
反応さえよければReduxを書けば管理状態の方が便利かと思います.
よく勉強しなさい.整理しないと頭の中に残らないので、私のようなニュービーに助けてほしいと思い、私に特に役に立つようにReduxを勉強しました.
まずReduxを理解してからReact-Reduxを理解します
1.構成部品が多いほど、利益が多くなります.
Reactで構成部品を作成してステータスを管理する場合、最大の問題は、構成部品が大量に増加した場合、これらのステータスをどのように管理するかです.Propsは?どうしよう.ReduxはStoreだと思ったjsではStateを集中的に管理することでこの部分を解決する
2.バージョン管理可能
これは本当に驚くべき部分で、拡張ツールを使用して状態の変化したストリームをビデオのように表示し、その時の機能に戻ることができます.本当に蜜ですね.
このため、ステータスをすぐに変更せずにコピーし、新しいステータスを作成できます.
Object.assignを使用するか、拡張オペレータ{..state}を使用してコピーして更新します.(例を参照)このようにして,開発者ツールではタイムマシンのように状態を切り替えることができる. ReactからState-SetStateに変更したように、変更は変更されません.
次のプロセス全体を理解することが重要なようです.各単語の意味を理解し、その役割を理解し、その働き方を理解します.
Storeという名前のスペースを作成し、State(オブジェクト)を保存します. UIでは、ユーザに何らかの動作がある. Dispacch動作 をReducerへ送信する. Reducerは、アクションのタイプに応じて実行する文を決定する. ストレージ領域のステータス値を置き換えるのではなく、新しいステータス値をstoreにコピーして保存します. の記憶領域に変更されたステータス値が保存されている場合、Dispatchはsubscribe(render)を呼び出してrenderに新しいステータス値を渡すことによってレンダリングされます. ショップは保存状態の場所です. getState()アクセス状態により、 dispatch(action)によって状態を修正する; subscribe(listener)でテナントを登録します. アプリケーションごとに1つしか作成できません. 外部から直接Storeにアクセスし、Stateを取得することができず、Reducerでアクセスします. Reducerは動作による状態変化の関数である. をパラメータとして、常に現状、行動を受け入れ、動作に応じて新しい状態に戻る. 純関数(Date.now()またはMathを使用します.ランダム()関数呼び出しX) API呼び出しやルーティング変換などバイパス効果を生じない
Case 1
ES 6 default arguments構文を使用して書き方を簡略化する方法
->No value/undefined値はpass(無視)
Object.assign(state,{visibility Filter:action.filter})も正しくありません.Stateが変更されるため、最初に空のオブジェクトを含める必要があります. ...stateで記入することもできます!(拡張オペレータ)*参考資料 の不明なアクションの場合は、defaultで元の値を返す必要があります. 動作が発生した場合、Reducerを呼び出して状態変化の関数を起動する. 示すように、動作はパラメータとしてtype(必須)と返す値(size)を含む.
Typeではどのような役割を果たすかを示します.類名のように聞こえるパラメータを受信し、アクションオブジェクトとしてアクション関数を作成します. アクションオブジェクトを直接作成することもできます. Storeの内蔵関数の1つです. パラメータとして関数形式で使用します. アクションが派遣されるたびに、伝達された関数が呼び出されます. React-Redux(ライブラリ)接続関数を使用して を購読
*モジュール:ActionType、ActionCreator、Reducerを含むファイル
1つのアイテムに複数のリダイレクトがある場合は、ROOT REDUCERを使用します.
統合リスナーの操作は、リスナーに組み込まれたコンビネーションリスナーという関数を使用します.
React-Redux
MapStateToProps():ステータス依存(Ex.State)-->props(コンポーネント)
この関数は、現在のReduxストアのステータスをステータスに変換する方法と、表示コンポーネントに渡すプロパティを作成します.
2.mapDispatchToProps():動作関連
この関数を使用してStoreにアクションを送信できます.Dispatch()をパラメータとしてコールバックからなる属性を返すと、その属性は表示素子に注入されます.
以前にmapStateToProps、mapDispatchToProps関数が作成されていた場合は、ConnectでVisibleToDoListが生成されます. React-Redoxライブラリで以前に作成するConstatier構成部品はすべて、リポジトリとリポジトリの連携を支援する構成部品 である. Providerを招待して、それを連動するComponentと一緒に包んで、propsでstoreを設定して終わりました!
spread演算子:https://paperblock.tistory.com/62
よく勉強しなさい.整理しないと頭の中に残らないので、私のようなニュービーに助けてほしいと思い、私に特に役に立つようにReduxを勉強しました.
まずReduxを理解してからReact-Reduxを理解します
なぜReduxが必要なのですか?
1.構成部品が多いほど、利益が多くなります.
Reactで構成部品を作成してステータスを管理する場合、最大の問題は、構成部品が大量に増加した場合、これらのステータスをどのように管理するかです.Propsは?どうしよう.ReduxはStoreだと思ったjsではStateを集中的に管理することでこの部分を解決する
2.バージョン管理可能
これは本当に驚くべき部分で、拡張ツールを使用して状態の変化したストリームをビデオのように表示し、その時の機能に戻ることができます.本当に蜜ですね.
このため、ステータスをすぐに変更せずにコピーし、新しいステータスを作成できます.
Object.assignを使用するか、拡張オペレータ{..state}を使用してコピーして更新します.(例を参照)
if (action.type === 'INCREMENT') {
return { ...state, number: state.number + action.size };
}
Reduxフルフロー
次のプロセス全体を理解することが重要なようです.各単語の意味を理解し、その役割を理解し、その働き方を理解します.
こうりゅう
Store
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
初期状態の設定
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
}
}
以上のコードは,現在の状態を受信し,スイッチングゲート/状態でコピーし,動作に応じて新しい状態を反映するコードである.注意事項
Dispatch
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
モジュールの作成例
*モジュール: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つの関数を定義する必要があります.
この関数は、現在の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
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
Reference
この問題について(ReduxとReact), 我々は、より多くの情報をここで見つけました https://velog.io/@kms0206/Redux와-Reactテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol