CREATESTOREのReduxの実現

使用済みの学生はこの事Reduxのを理解しておく必要があり反応します。彼は、あるグローバルな状態管理の考え方（右、ここで私は、物事に反応反応-Reduxのライブラリーをと互換性があるようにReduxのと何もニーズの内側に、実際には、リアクトのためので、それは、アイデアだと思うのみ）、それをそれは信じています：

唯一のデータウェアハウス
読み取り専用
データは、純粋関数によって変更することができます

実際には、これは、我々が再来を導入しても、また使用することができ、すべての後に私たちのための制約、あるthis.propsアセンブリ親子のデータ伝送を行うために、しかし、あなたは非親子通信コンポーネント、我々が使用してデータ・フローは、非常にとらえどころのないだろう必要がある場合Reduxの。

Reduxのを統合する際のプログラムの入り口に、リアクトでは、我々は、コードのこの部分を見ることができます

// 这里的todoApp是一个Reducer函数,接受的是state和actions
const store = createStore(todoApp)

我々は、我々が見ることができるから、同様のコードのいくつかは、我々は、このコンポーネントが持っているかを確認するために、単一の倉庫に反応する場合stateを介しているthis.state = store.getState()作成、我々はstore持っている目標であるgetState内部返す関数をstate同じ時間は、これがstate持続することが必要であるので、我々は、おそらくいくつかのアイデアを持つことができます。

import React, { Component } from 'react'
import store from '../../store'
import { getIPData } from '../../store/actionCreators'

class Page extends Component {
    // 我的初始化的一个组件,已经能够使用Redux了
    constructor(props) {
        super(props);
        this.state = store.getState()
        store.subscribe(this.storeChange.bind(this));
    }

    componentWillMount() {
        // 获取IP数据,这里是作为一个dispatch的例子
        // 值得注意的是getIPData()返回的是一个带type字段的一个对象。
        const action = getIPData();
        store.dispatch(action);
    }

    render() {
        return (
            <div className="page">
            </div>
        )
    }

    storeChange() {
        this.setState(store.getState())
    }
}
export default Page

次に、私は自分の書きますcreateStore突き出す機能を、次に説明します。彼らはいくつかの追加を持っているので、ほとんどの機能は、この機能を実装が、ここでは、決してミドルウェアに対処するために実を結ぶに来たが、私は戻ってする必要があります。


export default function createStore(reducer){
    let state = null;
    const listeners = [];
    const getState = () => state
    
    const dispatch = (action) => {
        state = reducer(state, action)
        listeners.forEach(listener => listener())
    }
    
    const subscribe = (listener) => listeners.push(listener)
    
    // 这里初始化dispatch的原因是在这之前,state是为null的
    //所以我需要传一个不存在的action去reducer里面,拿到最默认的那个defaultState
    //这个defaultState写在reducer的那个文件里面
    dispatch({});
    return {
        dispatch,
        subscribe,
        getState,
    }
}

だから分析、我々は関数オブジェクトを作成する必要がありますcreateStore

図1に示すように、createStore店舗の方法クロージャstate、我々のプログラムによって使用される倉庫これは、また、ストレージアレイの機能がありlisteners、ユーザ定義関数（更新後の一般的に使用倉庫リセットを格納するためのthis.stateIため実際、）複数のページでは、電話を取り出すことができる分布を取る必要があるときに関数の配列を使用し、そこにサブスクリプション機能を登録されています。

2、createStoreメソッドを定義する必要がありgetState得ることができstate、それはで使用できるように反応させ、this.state = store.getState()初期化するためにstate、リード

図3に示すように、createStoreまた、メソッドを定義する必要がありdispatchReduxの直接変更できないので、state値、マストdispatch、関数を渡しaction、その後でstate直接入ってくるreducer年、reducer戻り修飾しましたstate。

4は、createStoreその後、あなたがメソッドを定義する必要がありsubscribe、この機能は外の世界になるだろう結合機能の使用の変化を監視するために使用されますstate。この機能は、機能を受け取る必要がありますので、その後、キューにプッシュしていますが、キューを配置したいのはなぜリアルタイムに監視する必要がありますか？ここで私の理解では、キューにこの関数の先頭に「外の状態を取り戻す」となります同様の約束私は、この機能を使用することをお約束します。したがって、この機能の使用を配置する必要がありdispatch、それを返し、内部のstateポストを、再び実行するためにすべてのキュー機能で、「外の世界の状態を取り戻す」すべてのアウトにされます。

だからcreateStore効果は非常に明白な機能である、getState電流を取得するにはstate、subscribeモニタと外部モニタ機能を設定するために使用されるに格納されcreateStoreた各ユーザーがを通じて、機能のプロパティdispatchのパスaction変更するためstateの機能の実装を監視するすべてが、時間を再び。そして、dispatchそれが実行するために使用されたstate変更を、すべての後に、この機能は許可しないsetState機能のこのタイプを。

私が述べたようにこのように、我々は単純に理解し、再来とその書き換えの基本原則を分析し、Reduxのは、イデオロギー的な制約の種類生じ、手段、そのノードがあり、我々はまた、することができます（私はそれが必要ではないかもしれないと思うが）Reduxのを使用

CREATESTOREのReduxの実現

CREATESTOREのReduxの実現

おすすめ