ガイドモジュールの作成

反応項目に反応器を適用するために,反応器モジュールを作製した.
reduceモジュールは、以下のすべての項目を含むJavaScriptファイルを表します.

動作タイプ

動作作成関数

李杜瑟

+)初期状態

reduceを使用するために必要な上記の項目は、それぞれ異なるファイルに保存できます.
Ridex GitHub Repositoryに登録されているサンプルアイテムを見ると、コードは次のように分離されています.

actions

index.js

reducers

todo.js

visibilityFilter.js

index.js

上記の例では、アクションとリダイレクトは異なるファイルで定義されています.しかし、これらのコードは必ずしも別々ではない.逆に,開発中にコードを分けると不便になる可能性がある.
そこで,Reduserと動作関連コードを1つのファイルに集約して記述する.これをDucksモードと呼びます.reduceに関連するコードを分離する方法は不確定であるため,開発者は自由に分離することができる.

カウンタモジュールの作成

最初のRidexモジュールを作成します.srcディレクトリにmodulesディレクトリを作成します.counterが含まれます.コードを記述するためにjsファイルを作成しましょう.

counter.js

/*액션 타입 만들기*/
//액션 타입을 문자열로 만들면 액션 타입을 수정해야 할 경우 예를 들어 INCREASE -> INCREASE_PRICE, 
//해당 액션이 있는 생성함수를 모두 찾아서 수정해야하는 번거로운 일이 생긴다.
//따라서 액션타입을 상수로 선언해주면 선언부만 바꿔주면 되기 때문에 더욱 효율적이다.

//Ducks 패턴을 따를때에는 액션의 이름에 접두사를 넣어준다.
//이렇게 하면 다른 모듈과 액션 이름이 중복되는 것을 방지할 수 있다.
const SET_DIFF = 'counter/SET_DIFF';
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

/*액션 생성함수 만들기*/
// 액션 생성함수를 만들고 export 키워드를 사용하여 내보낸다.
// 컨테이너 컴포넌트에서 dispatch 를 이용할때 사용된다.
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;
  }
}

todosモジュールの作成

todosモジュールも作ろうモジュールディレクトリで同じtodos.jsファイルを生成し、コードを記述します.

todos.js

/*액션 타입 선언*/
const ADD_TODO = "todos/ADD_TODO";
const TOGGLE_TODO = "todos/TOGGLE_TODO";

/*액션 함수 선언*/
let nextId = 1;
export const addTodo = text => ({
  type: ADD_TODO,
  todo: {
    id: nextId++,// id 에 nextId 값을 넘겨준 후, nextId 값에 1을 더한다.
    text
  }
});
export const toggleTodo = id => ({
  type: TOGGGLE_TODO,
  id
});

/*초기 상태 선언*/
//리듀서의 초기 상태는 꼭 객체 타입일 필요는 없다.
//배열이어도 되고, 원시 타입 (숫자, 문자, boolean 이여도 상관없다.)
const initialState = [ ];

/*리듀서 선언*/
export default function todos(state = initialState, action){
  switch (action.type){
    case ADD_TODO:
      return state.concat(action.todo);
    case TOGGLE_TODO:
      return state.map(
        todo => 
        	todo.id === action.id
        		? { ...todo, done: !todo.done }
        		: todo
        )
    default:
      return state;
  }
}

スーパーユーザーの作成

2つのreduceモジュールが作成されました.だから李杜も二つです.1つのプロジェクトに複数のディーラーがある場合は、1つのディーラーに統合して使用します.マージされたreducerをrootreducerと呼びます.
統合reducerの操作は、reduceに組み込まれたcombineReducers関数を使用します.
modulesディレクトリにインデックスを付けます.jsを作成し、次のコードを記述します.

index.js

import { combineReducers } from 'redux';
import counter from './counter'; // ./counter 위치에서 export 하는 리듀서를 가져온다
import todos from './todos'; // ./todos 위치에서 export 하는 리듀서를 가져온다

const rootReducer = combineReducers({
  counter,
  todos
});

export default rootReducer;

リドサイは合併した.スーパーユーザーが作成されたら、今すぐショップを作成しましょう.
リカバリポイントを作成するタスクはsrcディレクトリのmainです.jsでやった

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import rootReducer from './modules';

const store = createStore(rootReducer); //스토어를 만든다.
console.log(store.getState());//스토어의 상태를 확인한다.

ReactDOM.render(<App />, document.getElementById('root'));

ショップが作成され、ショップの状態が出力されます.

通常、counterとtodosサブリーダーが統合されていることがわかります.console.log(store.getState());コードを削除しましょう.

応答項目への減益の適用

反応項目に反応還元を適用する場合は、反応還元ライブラリを使用します.ライブラリをインストールします.$ yarn add react-reduxそしてmainjsでは、Appコンポーネントを囲むためにProviderというコンポーネントがロードされます.そしてstoreをProviderのアイテムに入れます.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import rootReducer from './modules';
import { Provider } from 'react-redux';

const store = createStore(rootReducer); //스토어를 만든다.
console.log(store.getState());//스토어의 상태를 확인한다.

ReactDOM.render(
  <Provider store={store}>
  	<App />
  </Provider>, 
  document.getElementById('root')
);

Providerのpropsを使用してstoreを入れ、アプリケーションをラップすることで、レンダリングされたコンポーネントにかかわらずReadenstoreにアクセスできます.