見ればわかる例はreact-reduxで正しい姿勢を教えます.

whay write this:たくさんの白さんはたくさんの教程を見てから、コードを打つ時、どのような手順で進行するべきか分かりません.この文章は一歩ずつ過程を分解して、ゆっくりと動作して再生します.
このデモの機能はinputタグに内容を入力し、上に表示されているpタグに同期して表示します.DEMOは簡単です.
プロジェクトコードはここです.https://github.com/oliyg/redu...
clone:https://github.com/oliyg/redu...
余計なことを言わない
最初に上の図:

/*
                 _________               ____________               ___________
                |         |             |            |             |           |
                | Action  |------------▶| Dispatcher |------------▶| callbacks |
                |_________|             |____________|             |___________|
                     ▲                                                   |
                     |                                                   |
                     |                                                   |
 _________       ____|_____                                          ____▼____
|         |◀----|  Action  |                                        |         |
| Web API |     | Creators |                                        |  Store  |
|_________|----▶|__________|                                        |_________|
                     ▲                                                   |
                     |                                                   |
                 ____|________           ____________                ____▼____
                |   User       |         |   React   |              | Change  |
                | interactions |◀--------|   Views   |◀-------------| events  |
                |______________|         |___________|              |_________|
*/

    ：[redux-tutorial](https://github.com/happypoulp/redux-tutorial/blob/master/00_introduction.js)

上の図はみんながもっと熟知しているreduxデータフローです.この図からコードを打てばいいです.

component(  UI) -> action（        ） -> reducer(  action  ) -> store（  reducer  state dispatch） -> component（ connect  component、 Provider    UI） -> ...

ここでcreat-react-apを使ってインストールしてstartしました.無駄なファイルを整理して、自分達のファイルを追加します.
ファイルディレクトリは以下の通りです.

src
    component/
        Texture.js
    action/
        action.js
    reducer/
        reducer.js
    store/
        store.js
    App.js
    

はい、カタログファイルは大体このようにして、正式にコードを押し始めます.
私の位置:component/Texture.js
まずcomponentから切ります.
必要な依存性を取り入れる:

import React from 'react';

componentを作成しました.

const Texture = (props) => (
  

    
{props.str}
    
  
);

私の位置action/action.js
その後、actionを定義します.この例では、私達は一つの動作しかないです.input値を修正します.オンChangeという名前をactionに付けて、一つのパラメータeに入力して、typeとvalue値を含む対象を返します.最後にモジュールを暴露します.

const onChangeAction = (e) => (
  {
    type: 'INPUTCHANGE',
    value: e.target.value
  }
);

export default onChangeAction;

私のポジションreducer/reducer.js
actionを定義した後、私達は自然にこのactionを処理します.次のステップはreducerを作成します.
reducerは2つのパラメータを受信し、新しいstateに戻り、最初のパラメータstateは初期値を設定してからundefinedに戻り、第2のパラメータactionは、受信可能なactionパラメータを受信する.
stateに設置されているcomponentで使用して、ビューに表示されるprops値を結びつけるということは、以前に定義されていたstrとplacholderです.
reducer内部では、switchでactionのtypeを検出し、それぞれのtypeに基づいて対応するactionを処理する必要があります.
注意しなければならないのは、defaultの場合にstateに戻ることを覚えておかないと、マッチングしていないaction.typeがあれば、stateは失われます.

const reducer = (state = { str: '✒️write something: ', placeholder: 'here?' }, action) => {
  switch (action.type) {
    case 'INPUTCHANGE':
      return {
        str: action.value
      };
    default:
      return state;
  }
};

export default reducer;

私の位置:store/store.js
私たちはreducerがstore内に存在することを知っています.actionとreducerが全部配置された以上、次はstoreの番です.
reduxでcreateStoreモジュールと以前に定義されたreducerを導入して、storeを作成します.

import { createStore } from 'redux';
import reducer from '../reducer/reducer';
const store = createStore(reducer);

export default store;

私の位置:component/Texture.js
処理が完了したらまたcomponentに戻ります.
このように、私達はstoreのstateとdispatchをそれぞれcomponentに結び付けて、storeの中のstateとcomponentの中のpropsの連絡を通すだけでいいです.react-reduxから提供されるconnectとProviderだけが必要です.
関連モジュールをインポート:

import { Provider, connect } from 'react-redux';
import store from '../store/store';
import onChangeAction from '../action/action';

mapStateToPropsとmapDisplatToPropsの2つの関数を作成します.

const mapStateToProps = (state) => {
  return ({
    str: state.str,
    placeholder: state.placeholder
  });
};
const mapDispatchToProps = (dispatch) => {
  return ({
    onChange: (e) => { return dispatch(onChangeAction(e)) }
  });
};

そしてこの2つの商品とstoreをconnectとProviderを通してビューに結び付けます.

const TextureConnect = connect(mapStateToProps, mapDispatchToProps)(Texture);
const TextureWrapper = () => (
  
    
  
);
export default TextureWrapper;

私の位置:App.js
最後に、このコンポーネントをApp.jsに導入すればいいです.

//requirement
import React from 'react';
import TextureWrapper from './component/Texture';

const App = () => (
  
);

export default App;

また、component/Texture.jsの中でビューの部分は単独で出てきたほうがいいです.新しいフォルダviewディレクトリの下に置いて、TextureContiner.jsという名前で引用して、他のロジック部分を後者に置きます.