Javascriptのreduceを使用する
26028 ワード
https://react.vlpt.us/redux/
反応生態系で使用率の高い状態管理ライブラリ.
素子の状態関連ロジックをモジュール化して管理することもできるし、グローバル状態管理を容易に行うこともできる.
reducerを使用してステータス管理を行う場合は、userreducerと同様のreducer関数を使用します.ミドルウェアを使用すると、アクションオブジェクトがReduser処理前にタスクを処理できます.
connect関数を使用すると,リーダーの状態,動作生成関数を素子のpropsとして受信できる.
Context APIを使用してグローバル・ステータスを管理する場合、通常は機能別にContextを作成および使用します.
#1キーワード
reducer関数は、以前の状態と動作オブジェクトをパラメータとして受け入れます. までの状態は絶対に触れず、変化を引き起こす新しい状態オブジェクトを作成して返します. 同じパラメータのreducer関数を呼び出す いつだって 同じ結果値を返さなければなりません. #3 Ridex例
反応生態系で使用率の高い状態管理ライブラリ.
素子の状態関連ロジックをモジュール化して管理することもできるし、グローバル状態管理を容易に行うこともできる.
ミドルウェア
reducerを使用してステータス管理を行う場合は、userreducerと同様のreducer関数を使用します.ミドルウェアを使用すると、アクションオブジェクトがReduser処理前にタスクを処理できます.
有用な関数とHooks
connect関数を使用すると,リーダーの状態,動作生成関数を素子のpropsとして受信できる.
巨大な状態
Context APIを使用してグローバル・ステータスを管理する場合、通常は機能別にContextを作成および使用します.
プロジェクトの規模が大きく、頻繁に非同期で作業し、リスクがない場合は、使用してみてください。
#1キーワード
アクション
状態が変化したときに発生します.
typeフィールドを持っていなければなりません.その他は自由に使用できます.{
type: "ADD_TODO",
data: {
id: 0,
text: "리덕스 배우기"
}
}
アクション作成関数
パラメータを受信し、アクションオブジェクトとして返される関数.export function addTodo(data) {
return {
type: "ADD_TODO",
data
};
}
// 화살표 함수로도 만들 수 있습니다.
export const changeInput = text => ({
type: "CHANGE_INPUT",
text
});
さいせいき
変化を引き起こす関数.2つのパラメータを受け入れます.
state:現在のステータス.
Action:転送されたアクションオブジェクト.function reducer(state, action) {
// 상태 업데이트 로직
return alteredState;
}
function counter(state, action) {
switch (action.type) {
case 'INCREASE':
return state + 1;
case 'DECREASE':
return state - 1;
default:
return state;
}
}
複数のreducerを作成してマージすることもできます.
ストア
アプリケーションごとにショップが作成されます.
ショップには現在のステータス、リカバリプログラム、およびいくつかの組み込み関数があります.
派遣する
ショップの内蔵関数の1つで、アクションがトリガーされます.
dispatchを使用してアクションをパラメータとして呼び出すと、ストアはリプレイ関数を実行します.
購読(購読)
ショップの内蔵関数として、関数形式の値をパラメータとして受け入れます.
dispatchが動作するたびに、パラメータの関数が呼び出されます.
#2 Ridexルール
1.アプリケーションにショップがあります。
1つのアプリケーションでは、1つの店しか使用できません.
2.ステータスは読み取り専用です。
既存のステータスに影響を及ぼさずに新しいステータスを作成および更新する場合は、後で開発者ツールでロールバックするか、ロールバックすることができます.
3.変化を引き起こす関数、reducerは純粋な関数でなければなりません。
{
type: "ADD_TODO",
data: {
id: 0,
text: "리덕스 배우기"
}
}
export function addTodo(data) {
return {
type: "ADD_TODO",
data
};
}
// 화살표 함수로도 만들 수 있습니다.
export const changeInput = text => ({
type: "CHANGE_INPUT",
text
});
function reducer(state, action) {
// 상태 업데이트 로직
return alteredState;
}
function counter(state, action) {
switch (action.type) {
case 'INCREASE':
return state + 1;
case 'DECREASE':
return state - 1;
default:
return state;
}
}
1.アプリケーションにショップがあります。
1つのアプリケーションでは、1つの店しか使用できません.
2.ステータスは読み取り専用です。
既存のステータスに影響を及ぼさずに新しいステータスを作成および更新する場合は、後で開発者ツールでロールバックするか、ロールバックすることができます.
3.変化を引き起こす関数、reducerは純粋な関数でなければなりません。
#3 Ridex例 import { createStore } from 'redux';
// createStore는 스토어를 만들어주는 함수입니다.
// 리액트 프로젝트에서는 단 하나의 스토어를 만듭니다.
/* 리덕스에서 관리 할 상태 정의 */
const initialState = {
counter: 0,
text: '',
list: []
};
/* 액션 타입 정의 */
// 액션 타입은 주로 대문자로 작성합니다.
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
const CHANGE_TEXT = 'CHANGE_TEXT';
const ADD_TO_LIST = 'ADD_TO_LIST';
/* 액션 생성함수 정의 */
// 액션 생성함수는 주로 camelCase 로 작성합니다.
function increase() {
return {
type: INCREASE // 액션 객체에는 type 값이 필수입니다.
};
}
// 화살표 함수로 작성하는 것이 더욱 코드가 간단하기에,
// 이렇게 쓰는 것을 추천합니다.
const decrease = () => ({
type: DECREASE
});
const changeText = text => ({
type: CHANGE_TEXT,
text // 액션안에는 type 외에 추가적인 필드를 마음대로 넣을 수 있습니다.
});
const addToList = item => ({
type: ADD_TO_LIST,
item
});
/* 리듀서 만들기 */
// 위 액션 생성함수들을 통해 만들어진 객체들을 참조하여
// 새로운 상태를 만드는 함수를 만들어봅시다.
// 주의: 리듀서에서는 불변성을 꼭 지켜줘야 합니다!
function reducer(state = initialState, action) {
// state 의 초깃값을 initialState 로 지정했습니다.
switch (action.type) {
case INCREASE:
return {
...state,
counter: state.counter + 1
};
case DECREASE:
return {
...state,
counter: state.counter - 1
};
case CHANGE_TEXT:
return {
...state,
text: action.text
};
case ADD_TO_LIST:
return {
...state,
list: state.list.concat(action.item)
};
default:
return state;
}
}
/* 스토어 만들기 */
const store = createStore(reducer);
console.log(store.getState()); // 현재 store 안에 들어있는 상태를 조회합니다.
// 스토어안에 들어있는 상태가 바뀔 때 마다 호출되는 listener 함수
const listener = () => {
const state = store.getState();
console.log(state);
};
const unsubscribe = store.subscribe(listener);
// 구독을 해제하고 싶을 때는 unsubscribe() 를 호출하면 됩니다.
// 액션들을 디스패치 해봅시다.
store.dispatch(increase());
store.dispatch(decrease());
store.dispatch(changeText('안녕하세요'));
store.dispatch(addToList({ id: 1, text: '와우' }));
reactionでuseStateを使用する場合はdispatchという関数を使用して動作しますが、regionsではstoreの内蔵関数なのでstoreで実現します.
#4冗長モジュール
アクションタイプ、アクション生成関数、リダイレクトに含まれるJavaScriptファイル.
Reduserは,動作に関するコードを1つのファイルに集約してDucksモードと呼ぶ.
一般的なモードは、複数のreducerとindexを作成することです.jsという名前のファイルで、combineReducers
を使用してすべてのReducerを1つのファイルにマージします.// modules/index.js
import { combineReducers } from 'redux';
import counter from './counter';
import todos from './todos';
const rootReducer = combineReducers({
counter,
todos
});
export default rootReducer;
各種プロペラを一つにする.// index.js
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();
実際には、インデックスコンポーネントでは、ショップとして作成された冗長性が使用されます.// index.js
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 { Provider } from 'react-redux';
import rootReducer from './modules';
const store = createStore(rootReducer); // 스토어를 만듭니다.
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
Providerで包んだ後、storeに作成したstoreを入れて、どんな要素でも使用できます.
Reference
この問題について(Javascriptのreduceを使用する), 我々は、より多くの情報をここで見つけました
https://velog.io/@sham/자바스크립트로-하는-리덕스
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
import { createStore } from 'redux';
// createStore는 스토어를 만들어주는 함수입니다.
// 리액트 프로젝트에서는 단 하나의 스토어를 만듭니다.
/* 리덕스에서 관리 할 상태 정의 */
const initialState = {
counter: 0,
text: '',
list: []
};
/* 액션 타입 정의 */
// 액션 타입은 주로 대문자로 작성합니다.
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
const CHANGE_TEXT = 'CHANGE_TEXT';
const ADD_TO_LIST = 'ADD_TO_LIST';
/* 액션 생성함수 정의 */
// 액션 생성함수는 주로 camelCase 로 작성합니다.
function increase() {
return {
type: INCREASE // 액션 객체에는 type 값이 필수입니다.
};
}
// 화살표 함수로 작성하는 것이 더욱 코드가 간단하기에,
// 이렇게 쓰는 것을 추천합니다.
const decrease = () => ({
type: DECREASE
});
const changeText = text => ({
type: CHANGE_TEXT,
text // 액션안에는 type 외에 추가적인 필드를 마음대로 넣을 수 있습니다.
});
const addToList = item => ({
type: ADD_TO_LIST,
item
});
/* 리듀서 만들기 */
// 위 액션 생성함수들을 통해 만들어진 객체들을 참조하여
// 새로운 상태를 만드는 함수를 만들어봅시다.
// 주의: 리듀서에서는 불변성을 꼭 지켜줘야 합니다!
function reducer(state = initialState, action) {
// state 의 초깃값을 initialState 로 지정했습니다.
switch (action.type) {
case INCREASE:
return {
...state,
counter: state.counter + 1
};
case DECREASE:
return {
...state,
counter: state.counter - 1
};
case CHANGE_TEXT:
return {
...state,
text: action.text
};
case ADD_TO_LIST:
return {
...state,
list: state.list.concat(action.item)
};
default:
return state;
}
}
/* 스토어 만들기 */
const store = createStore(reducer);
console.log(store.getState()); // 현재 store 안에 들어있는 상태를 조회합니다.
// 스토어안에 들어있는 상태가 바뀔 때 마다 호출되는 listener 함수
const listener = () => {
const state = store.getState();
console.log(state);
};
const unsubscribe = store.subscribe(listener);
// 구독을 해제하고 싶을 때는 unsubscribe() 를 호출하면 됩니다.
// 액션들을 디스패치 해봅시다.
store.dispatch(increase());
store.dispatch(decrease());
store.dispatch(changeText('안녕하세요'));
store.dispatch(addToList({ id: 1, text: '와우' }));
アクションタイプ、アクション生成関数、リダイレクトに含まれるJavaScriptファイル.
Reduserは,動作に関するコードを1つのファイルに集約してDucksモードと呼ぶ.
一般的なモードは、複数のreducerとindexを作成することです.jsという名前のファイルで、
combineReducers
を使用してすべてのReducerを1つのファイルにマージします.// modules/index.js
import { combineReducers } from 'redux';
import counter from './counter';
import todos from './todos';
const rootReducer = combineReducers({
counter,
todos
});
export default rootReducer;
各種プロペラを一つにする.// index.js
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();
実際には、インデックスコンポーネントでは、ショップとして作成された冗長性が使用されます.// index.js
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 { Provider } from 'react-redux';
import rootReducer from './modules';
const store = createStore(rootReducer); // 스토어를 만듭니다.
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
Providerで包んだ後、storeに作成したstoreを入れて、どんな要素でも使用できます.Reference
この問題について(Javascriptのreduceを使用する), 我々は、より多くの情報をここで見つけました https://velog.io/@sham/자바스크립트로-하는-리덕스テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol