ReactJSラーニングシリーズコース(React Redux使用)

ReactデータフローのパターンのFluxパターン、つまり一方向データフローは、これも公式に推奨されている方式であり、実際にはReactが最も理解しにくい一部でもある.
React-reduxの使用をよりよく理解するために、まずReduxの使用を理解してみましょう.今、この単語の発音を調べてみましょう.私たちは初めて接触したので、後で読み間違えないようにしました.
Reduxの紹介
複雑な単一ページアプリケーションでは、ステータス管理が重要です.stateには、サービス側の応答データ、応答データに対するローカルのキャッシュ、フォームデータなどのローカルで作成されたデータ、およびルーティング、選択したtab、ドロップダウンリストを表示するかどうか、ページ番号制御などのUIのステータス情報が含まれる場合があります.stateの変化が予測できない場合、デバッグが困難になり(stateは再現しにくく、いくつかのバグを再現しにくい)、拡張が困難になります(たとえば、更新レンダリングの最適化、サービス側レンダリングの最適化、ルーティング切り替え時のデータ取得など).
Reduxはstateの変化の予測性を確保するために使用され、主な制約は次のとおりです.

stateは、storeオブジェクトに単一のオブジェクトで格納

である.

state読取り専用

純関数reducerを使用してstate更新

を実行する

stateは単一のオブジェクトであり、Reduxはステータスツリーを1本維持するだけで、サービス側はステータスを初期化しやすく、サーバレンダリングが容易になります.

stateはdispatch(action)によってのみ更新をトリガし、更新ロジックはreducerによって実行される.

Actions、Reducers、Storeの紹介
Actionはstoreに伝達されるデータ情報(一般にユーザインタラクティブ情報)を適用すると理解できる.実際の応用では、伝達された情報は、固定されたデータフォーマットを約定することができる.
テストを容易にし、拡張を容易にするために、ReduxはActionCreatorを導入しました.

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

export function deleteTodo(id) {
  return { type: types.DELETE_TODO, id };
}

export function editTodo(id, text) {
  return { type: types.EDIT_TODO, id, text };
}

export function completeTodo(id) {
  return { type: types.COMPLETE_TODO, id };
}

reducerは実際には関数です:(previousState,action)=>newState.指定したactionに基づいてstateを更新するロジックを実行します.combineReducers(reducers)により複数のreducerを1つのroot reducerに統合することができる.
storeは単一のオブジェクトです.

管理アプリケーションstate

はstoreを通過する.getState()はstate

を取得できます

はstoreを通過する.dispatch(action)はstate更新

をトリガする

はstoreを通過する.subscribe(listener)はstate変化リスナー

を登録する

createStore(reducer,[initialState])によって作成された

Reduxと従来のFluxの比較
図はUNDIRECTIONAL USER INTERFACE ARCHITECTURESから
ReactとRedux
ReduxとReactには必然的な関係はありません.Reduxはstateを管理するために使用され、具体的なViewフレームワークとは関係ありません.ただし、Reduxは、state=>UIのフレームワーク(例えば、React、Deku)に特に適しています.
react-reduxを使用してReactをバインドできます.react-reduxバインドコンポーネントはsmart componentsと呼ばれています.
react-reduxの使用
次に、react-reduxのreactプロジェクトでの使用を簡単な例で説明します.主な機能はカウント機能であり、増加、減少であり、コードを見てみましょう.

インポートに必要なコアライブラリ:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import {bindActionCreators, combineReducers, createStore} from 'redux';
import {Provider, connect} from 'react-redux';

コンポーネントの作成:

// React Component
class Counter extends React.Component {
    render () {
        const {value, onIncreaseClick, onDecreaseClick} = this.props;

        console.log(this.props)

        return (
            <div>
                {value}
                click+
                  click-
            div>
        )
    }
}

Counter.propTypes = {
    value: PropTypes.number.isRequired,
    onIncreaseClick: PropTypes.func.isRequired,
    onDecreaseClick: PropTypes.func.isRequired
};

2 2 2つのactionを作成する:

// Action
const increaseAction = {type: 'increase'};

const decreaseAction = {type: 'decrease'};

reducerを作成する:

// Reducer
function count (state = 0, action) {

    switch (action.type) {
        case 'increase':
            return state + 1;
        case 'decrease':
            return state - 1;
        default:
            return state
    }
}

reducerを組み合わせてstoreを作成する:

let todoApp = combineReducers({
  count, count2
});

// Store
let store = createStore(todoApp);

関連reducerとstore:

function mapStateToProps (state) {
    return {value: state.count};
}

function mapDispatchToProps (dispatch) {
    store.getState()
    return {onIncreaseClick: () => dispatch(increaseAction), onDecreaseClick: () => dispatch(decreaseAction)}
}

let App = connect(mapStateToProps, mapDispatchToProps)(Counter);

コンポーネントを真のページにレンダリングする:

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

これがreact-reduxの簡単な実用で、reactの学習は長い過程で、みんなは自分で試してみましょう.