「言外の意味」を使用したレスポンス・プログラムのステータス2

目次

17.1作業環境の設定

17.2 UIの準備

17.2.1カウンタ構成部品

を作成する.

17.2.2保留リストコンポーネント

を作成する

17.3リデスに関するコードの作成

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

17.3.1.1動作タイプ

17.3.1.2アクション作成関数

を作成する.

17.3.1.3初期状態とreducer関数

の作成

17.3.2 todosモジュールの作成
定義

17.3.2.1動作タイプ

作成

17.3.2.2アクション作成関数

作成

17.3.3スーパーユーザー

17.4応答アプリケーションの冗長性の導入

17.4.1ショップ

を作成

17.4.2 Provider構成部品を使用して、プロジェクト

に冗長性を適用します.

17.4.3 Redux DevToolsインストールとアプリケーション

17.5コンテナ構成部品の作成

作成

17.5.1 ComputerContainer

17.5.1.一時関数により回路素子と冗長

とを接続する.

17.5.1.2アクション作成関数を呼び出してアクションオブジェクトを作成し、そのデバッガを

に接続します.

17.5.1.3 mapStateToProps,mapDispatchToPropsの匿名関数

17.5.1.4 BindActionCreatorsの使用

作成

17.5.2 TodosContainer

17.5.2.1 TodosコンポーネントとしてTodosContainerを作成するコンテナ

17.5.2.2アプリケーションコンポーネントのTodosContainer

17.5.2.3 Todosエレメントから受け取ったアイテム

を使用

17.6 Ridexの方が快適

17.6.1 redux-actions

17.6.1.1カウンタモジュール

に適用する.

17.6.1.2 todosモジュール

に適用

17.6.2 immer

17.7 Hooksを使用したコンテナ構成部品の作成

17.1ユーザセレクタによりステータス

を表示する.

17.2 usDispatchによるアクションディスパッチ

17.3 usStoreでリカバリポイント

を使用

17.4 TodosContainerをHooks

に変換

17.5ユーザーアクションユーティリティの作成と使用

17.6 connect関数と主な違い:

17.5コンテナ構成部品の作成

素子から回復点に近づき,所望の状態を得,動作もdispatchする.リカバリポイントに関連付けられた構成部品をコンテナ構成部品と呼びます.

17.5.1. ComputerContainerの作成

17.5.1.一時関数により回路素子と冗長

とを接続する.

// containers/CounterContainer.js
import React from 'react';
import Counter from '../components/Counter';

const CounterContainer = () => {
  return <Counter />;
};

export default CounterContainer

上記の構成部品を冗長性に関連付けるには、react-reducxが提供するconnect関数を使用する必要があります.connect関数の使い方は次のとおりです.connect(mapStateToProps, mapDispatchToProps)(연동할 컴포넌트)ここでmapStateToPropsは、リカバリポイントの状態をコンポーネントのpropsに渡す関数です.mapDispatchToPropsは、動作作成関数をコンポーネントに渡すためのpropsの関数です.
さらに具体化すると、const makeContainer = connect(mapStateToProps, mapDispatchToProps)makeContainer(타깃 컴포넌트)と書くことができる.
connect関数を呼び出すと、別の関数が返されます.戻り関数にエレメントをパラメータとして入れると、ガイドに関連付けられたエレメントが作成されます.

// containers/CounterContainer.js
import React from 'react';
import {connect} from 'react-redux';
import Counter from '../components/Counter';

const CounterContainer = ({number, increase, decrease}) => {
  return (
    <Counter number={number} onIncrease={increase} onDecrease={decrease} />
    );
};

const mapStateToProps = state => ({
  number: state.counter.number,
});

const mapDispatchToProps = dispatch => ({
  // 임시 함수
  increase: () => {
    console.log('increase');
  },
  decrease: () => {
    console.log('decrease');
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(CounterContainer);

mapStateToPropsとmapDispatchPropsから返されるオブジェクト内部の値は、コンポーネントのpropsに渡されます.mapStateToPropsは、現在の店舗が持つ状態を示すstateをパラメータとして受け入れます.
mapDispatchToPropsの場合、storeの内蔵関数dispatchをパラメータとして受信します.mapDispatchToProps一時コンソールは、プロセスを説明するために使用されます.logを使用しています.
さらに(CounterContainer)を加え、mapStateToProps、mapDispatchToPropsをComputeContainerにバインドします.
AppでCounterContainerを使用してCounterを置き換えます.

import React from 'react';
import Todos from './components/Todos';
import CounterContainer from './containers/CounterContainer';

const App = () => {
  return (
    <div>
    	<CounterContainer />
    	<hr />
    	<Todos />
   	</div>
  );
};
export default App;

17.5.1.2アクション作成関数を呼び出してアクションオブジェクトを作成し、そのデバッガを

に接続します.

// containers/CounterContainer.js
import React from 'react';
import {connect} from 'react-redux';
import Counter from '../components/Counter';
// 액션 생성함수 increase, decrease
import {increase, decrease} from '../modules/counter';

const CounterContainer = ({number, increase, decrease}) => {
  return (
    <Counter number={number} onIncrease={increase} onDecrease={decrease} />
    );
};

const mapStateToProps = state => ({
  number: state.counter.number,
});

const mapDispatchToProps = dispatch => ({
  increase: () => {
    dispatch(increase());
  },
  decrease: () => {
    dispatch(decrease());
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(CounterContainer);

console.log()の代わりに動作生成関数(import {increase, decrease} from '../module/counter')を呼び出して動作オブジェクトを作成し、dispatchを行う.

派遣?

17.5.1.3 mapStateToProps,mapDispatchToPropsの匿名関数

//container/CounterContainer.js
import React from "react";
import { connect } from "react-redux";
import Counter from "../components/Counter";
// 액션 생성함수 increase, decrease
import { increase, decrease } from "../modules/counter";

const CounterContainer = ({ number, increase, decrease }) => {
  return (
    <Counter number={number} onIncrease={increase} onDecrease={decrease} />
  );
};1

export default connect(
  (state) => ({
    number: state.counter.number,
  }),
  (dispatch) => ({
    increase: () => dispatch(increase()),
    decrease: () => dispatch(decrease()),
  })
)(CounterContainer);

bindActionCreatorsを使用した

17.5.1.4リリース
各アクション生成関数を呼び出し、割り当てパッケージを使用してコンポーネントにアクションを割り当てるのは面倒です.動作生成関数が多ければ多いほど面倒になります.この場合、reduceのbindActionCreatorsユーティリティ関数を使うと便利です.

// containers/CounterContainer.js
import React from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import Counter from "../components/Counter";
import { increase, decrease } from "../modules/counter";

const CounterContainer = ({ number, increase, decrease }) => {
  return (
    <Counter number={number} onIncrease={increase} onDecrease={decrease} />
  );
};

export default connect(
  (state) => ({
    number: state.counter.number,
  }),
  (dispatch) =>
    bindActionCreators(
      {
        increase,
        decrease,
      },
      dispatch
    )
)(CounterContainer);

17.5.5 mapDispatchToPropsのパラメータを、関数形式のオブジェクトではなく「アクション作成関数」として挿入します.
checkここでいう関数形式パラメータは何ですか

// containers/CounterContainer.js
import React from 'react';
import {connect} from 'react-redux';
import Counter from '../components/Counter';
import {increase, decrease} from '../modules/counter';

const CounterContainer = ({number, increase, decrease}) => {
  return (
    <Counter number={number} onIncrease={increase} onDecrease={decrease} />
    );
};

export default connect(
  state => ({
    number: state.counter.number,
  }),
  {
    increase,
    decrease,
  },
)(CounterContainer);

上記のように、2番目のパラメータをオブジェクトとして挿入すると、connect関数はbindActionCreatorsの代わりに内部で動作します.
チェックここで2番目のパラメータは何ですか?

作成17.5.2 TodosContainer

17.5.2.1 Todosコンポーネント用のTodosContainerコンテナの作成
コードはconnect関数,mapDispatchToPropsの短い書き方を用いて記述した.

// container/TodosContainer.js
import React from 'react';
import {connect} from 'react-redux';
import {changeInput, insert, toggle, remove} from '../modules/todos';
import Todos from '../components/Todos';

const TodosContainer = ({
  input,
  todos,
  changeInput,
  insert,
  toggle,
  remove,
}) => {
  return (
    <Todos 
    	input={input}
		todos={todos}
		onChangeInput={changeInput}
		onInsert={insert}
		onToggle={toggle}
		onRemove={remove}
	/>
  );
};

export default connect(
  ({todos}) => ({
    input: todos.input,
    todos: todos.todos,
  }),
  {
    changeInput,
    insert,
    toggle,
    remove,
  },
)(TodosContainer);

todosモジュールで記述された動作生成関数と状態の値を素子のpropsに渡す.
コンテナ構成部品が完成したら、App構成部品のTodos構成部品をTodosContainer構成部品に置き換えます.

17.5.2.2アプリケーションコンポーネントのTodosContainer

//App.js
import React from 'react';
import CounterContainer from './containers/CounterContainer';
import TodosContainer from './containers/TodosContainer';

const App = () => {
  return (
    <div>
    	<CounterContainer />
    	<hr/>
    	<TodosContainer/>
    </div>
  );
};
export default App;

17.5.2.3 Todosエレメントから受け取ったアイテム

を使用

// components/Todos.js
import React from "react";

const TodoItem = ({ todo, onToggle, onRemove }) => {
  return (
    <div>
      <input
        type="checkbox"
        onClick={() => onToggle(todo.id)}
        checked={todo.done}
        readOnly={true}
      />
      <span style={{ textDecoration: todo.done ? "line-through" : "none" }}>
        {todo.text}
      </span>
      <button onClick={() => onRemove(todo.id)}>삭제</button>
    </div>
  );
};

const Todos = ({
  input,
  todos,
  onChangeInput,
  onInsert,
  onToggle,
  onRemove,
}) => {
  const onSubmit = (e) => {
    e.preventDefault();
    onInsert(input);
    onChangeInput("");
  };
  const onChange = (e) => onChangeInput(e.target.value);
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input value={input} onChange={onChange} />
        <button type="submit">등록</button>
      </form>
      <div>
        {todos.map((todo) => (
          <TodoItem
            todo={todo}
            key={todo.id}
            onToggle={onToggle}
            onRemove={onRemove}
          />
        ))}
      </div>
    </div>
  );
};

export default Todos;