Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

4.4 KiB

Raw Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036141	React Redux 入門	6	301430	getting-started-with-react-redux

--description--

この一連のチャレンジでは、React で Redux を使用する方法を紹介します。最初に、それぞれのテクノロジーの主な原則についていくつか確認しておきましょう。 React はビューライブラリです。データを提供すると、効率的で予測可能な方法でビューをレンダーします。 Redux は状態管理フレームワークです。これを使用してアプリケーションの状態の管理を簡素化することができます。通常、React Redux アプリでは、アプリ全体の状態を管理する単一の Redux ストアを作成します。 React コンポーネントでは、ストア内のデータのうち、それらの役割に関連するもののみにサブスクライブします。そして、React コンポーネントから直接アクションをディスパッチすることで、ストアの更新をトリガーします。

React コンポーネントで自身の状態をローカルに管理することもできますが、複雑なアプリの場合は、Redux を使用してアプリの状態を 1 か所に保つ方が通常は便利です。ただし、個々のコンポーネントが自身に特有のローカルな状態を持つような場合は例外です。また、Redux はそのままで React と連携するようには設計されていないため、react-redux パッケージを使用する必要があります。このパッケージによって、React コンポーネントに Redux の state を渡して props として dispatch できるようになります。

以降のいくつかのチャレンジでは、まず、新しいテキストメッセージを入力できるシンプルな React コンポーネントを作成します。メッセージは配列に追加され、ビューに表示されます。このチャレンジは React のレッスンで学んだことを復習する良い機会になります。次に、messages 配列の状態を管理する Redux ストアとアクションを作成します。最後に、react-redux を使用して Redux ストアとコンポーネントを接続し、それを通じてローカルの state を Redux ストアに抽出します。

--instructions--

DisplayMessages コンポーネントから作業を始めます。このコンポーネントにコンストラクターを追加し、2 つのプロパティを持つ state で初期化してください。プロパティの 1 つは input で、空の文字列に設定します。もう 1 つは messages で、空の配列に設定します。

--hints--

DisplayMessages コンポーネントで空の div 要素をレンダーします。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
    return mockedComponent.find('div').text() === '';
  })()
);

DisplayMessages コンストラクターを super を使用して正しく呼び出し、props を渡します。

(getUserInput) =>
  assert(
    (function () {
      const noWhiteSpace = __helpers.removeWhiteSpace(getUserInput('index'));
      return (
        noWhiteSpace.includes('constructor(props)') &&
        noWhiteSpace.includes('super(props')
      );
    })()
  );

DisplayMessages コンポーネントの初期状態を {input: "", messages: []} にします。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
    const initialState = mockedComponent.state();
    return (
      typeof initialState === 'object' &&
      initialState.input === '' &&
      Array.isArray(initialState.messages) &&
      initialState.messages.length === 0
    );
  })()
);

--seed--

--after-user-code--

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

--seed-contents--

class DisplayMessages extends React.Component {
  // Change code below this line

  // Change code above this line
  render() {
    return <div />
  }
};

--solutions--

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  render() {
    return <div/>
  }
};

4.4 KiB Raw Blame History