React => Reduxに反応する

前書き

最近では、フロントエンドでアプリケーションレベルの状態を管理するための現状となってきており、「大規模アプリケーション」を扱う人々は、それを誓うことがよくあります。このトピックでは、Reactアプリケーションで状態管理ライブラリReduxを使用する理由と方法について説明します。

備考

Reactのコンポーネント駆動型アーキテクチャは、アプリケーションをモジュール化されたカプセル化された小さな部分に分割するのに素晴らしいものですが、アプリケーション全体の状態を管理するためのいくつかの課題があります。 Reduxを使用する時間は、同じデータを複数のコンポーネントまたはページ（別名ルート）に表示する必要がある場合です。その時点で、あるコンポーネントまたは他のコンポーネントにローカルな変数にデータを格納することはもうできません。コンポーネント間でメッセージを送信すると、すぐに混乱することになります。 Reduxを使用すると、コンポーネントはすべてストア内の同じ共有データにサブスクライブされ、状態はアプリケーション全体に一貫して簡単に反映されます。

接続の使用

createStoreを使用してReduxストアを作成します。

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp, { inistialStateVariable: "derp"})

接続を使用してコンポーネントをReduxストアに接続し、ストアからコンポーネントにプルプルをプルします。

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

コンポーネントがReduxストアにメッセージを送信するためのアクションを定義します。

/*
 * action types
 */

export const ADD_TODO = 'ADD_TODO'

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

これらのメッセージを処理して、リデューサ機能のストアの新しい状態を作成します。

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

React
Reduxに反応する

サーチ…

前書き

備考

接続の使用