ReduxベースチュートリアルおよびReactを組み合わせた使用方法

8518 ワード

この文書では、最も簡単なReduxアプリケーションを実現し、Reactと組み合わせてどのように使用するかを教えます.
Reduxの概要
コンセプト
ステータス管理ツールは、使用後、アプリケーションで何が起こっているのかを明確に知ることができます.データの変更方法、更新方法.
出現の動機
以前、Reduxのようなステータス管理ツールに触れたばかりの頃、なぜこれらのものが必要なのか、リフレッシュデータが消えたり、ストレージデータが永続化されたりして、何の役に立つのかと思っていました.その後、ゆっくりと応用すればするほど、機能が複雑になり、多くのデータが何の原因で修正されたのか、いつ修正されたのか、自分が愚かな顔をしていることがわかります.何も思い出せない、守るのは本当につらい.この時になってやっとReduxのようなツールのすごいところを発見しました.名前もふさわしい、ステータス管理ツール.はっきり言って、管理状態です.データの変化過程をできるだけ明確で予測可能にする.
プロジェクトにReduxを追加する必要はありません.プロジェクトのニーズに応じてReduxを導入するかどうかを選択してください
三大原則

単一データソースのアプリケーション全体のstateは、object treeに格納され、このobject treeは唯一のstoreにのみ存在する.

Stateは読み取り専用であり、stateを変更する唯一の方法はactionをトリガすることであり、actionは発生したイベントを記述するための一般的なオブジェクトである.

純粋な関数を使用して、actionがstate treeをどのように変更するかを説明するために、reducersを記述する必要があります.

Redux 3要素

Action(発生する操作)

Reducer(actionに従ってstateを更新し、純粋な関数です)

combineReducers(reducers)関数の組合せを提供する複数のreducer

stateデータを格納するStore(actionとreducerを関連付けたオブジェクト)

getState()メソッド取得state

を提供する

dispatch(action)メソッド更新state

を提供する

subsctibe(listener)登録リスナー

subscribr(listener)によって返される関数ログアウトリスナー

サンプルコード
ここでは、最も簡単なReduxアプリケーションの作成を教えています.では、Reduxを使うのがどれだけ簡単なのか、どれだけ速いのかを見てみましょう.
使用前にRedux:npm install redux -Sを導入

まずActionの3要素の1つがActionがあるのではありませんか、私达が先にActionを书いて関数を作成します
Action作成関数は、actionを返す関数で、このように書く必要はありませんが、移植と多重化が容易です.Action作成関数を使用してactionを生成することをお勧めします.

function increment() {
    return {
        type: "INCREMENT"
    }
}

アクションがあって、またReducerが更新を実行します.Reducerは必要以上にReducerを書いています.(ここでは少しぼんやりしているかもしれませんが、reducerはオブジェクトではなく、更新後のstateを返す純粋な関数です)

/**
* counters      reducer，      action   type   ，       state   
*/
//      state
const initCounter = 0;
function counters(state = initCounter, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state ++;
        default:
            return state;
    }
}

stateデータを格納するstoreが必要です.今、私たちが書いたActionとReducerを接続します.

まずreducerによってstore

を作成する

const { createStore } = require('redux');

const store = createStore(counters);

はstoreを通過する.dispatch(action)はactionをreducerに送信し、state

を更新する.

store.dispatch(increment());

結果を見るにはこの3つのステップで、操作が終わったでしょう.では、結果を見ることができます.

//    store.getState()    State   
console.log('counters: ', store.getState());   // => counters： 1

プロセスのまとめ:
操作命令actionの作成->reducerの作成->createStore(reducer)によるstoreの作成->storeによる.dispatch(action)はreducerの更新操作を実行し、storeのデータを更新する.
これらがReduxの核心的な使い方で、簡単な感じがしますか?興味があれば、私と一緒に下を続けて、Reactと組み合わせてどのように使うかを見てみましょう.
Reactとの併用
React-Redux
ReactとReduxを組み合わせて使用するプラグイン
create-react-app足場を例に挙げると、create-react-appを使用してローカルプロジェクトを作成してください.この例ではデフォルトcreate-react-appがグローバルにインストールされています

$ npm npm init react-app react-redux-todos
$ cd react-redux-todos

プラグインのインストール

$ npm install redux react-redux -S

アセンブリに合わせて使用

コンポーネントルートディレクトリでreact-reduxが提供するProdiverラベルパッケージを使用

import { Provider } from 'react-redux';


    ...

stateまたはactionを使用する必要があるコンポーネントにconnect高次コンポーネントを使用して包装する

import { connect } from 'react-redux';
import { createAction } from './actions'

// mapStateToProps     
const mapStateToProps = (state) => {
    return {
        reducer: state.reducer
    }
}

// mapDispatchToProps     
const mapDispatchToProps = (dispatch) => {
    return {
        createAction: text => dispatch(createAction(field));
    }
}

//    connect   state   dispatch     Component     
export default connect(mapStateToProps, mapDispatchToProps)(Component);

はコンポーネント内でthisを通過することができる.props.reducerとthis.props.createAction方式でデータを取得し、actionを呼び出す

TodoList例
サンプルコード
プレビューアドレス
拡張
ReducerのcombineReducersメソッド
複数のreducerがある場合、storeを作成する前にマージする必要があります.

import { combineReducers } from 'redux';

//       reducers
const reducers = combineReducers({
    a: doSomethingWithA,
    b: processB,
    c: c
});

Storeのsubscribeメソッド

storeを呼び出す.subsctibe(listener)登録リスニングイベントstoreのデータが変化するとlistener関数が呼び出されます

/**
 *    store.subscribe(function)        。   state    ，        
 */
store.subscribe(() => console.log(store.getState()));

store.subscribe(listener)の戻り値は、リスニングをログアウトする関数です.

/**
 * store.subscribe(func)        ，             
 */
//        unsubscribe
const unsubscribe = store.subscribe(() => console.log(store.getState()));
//              
unsubscribe();

元のリンク:https://juejin.im/post/5c34394b518825261c1b773d,出典:掘金

phpはフィボナッチ数列と楊輝三角を実現する

PHP Jsonの解決decode解析に失敗しました