摘要：很多小白在看過很多教程之后仍然在敲代碼的時候不清楚應該以什么樣的步驟進行，那么這篇文章就一步一步分解整個過程，慢動作回放讓大家看的清清楚楚明明白白。另外，中視圖部分最好多帶帶出來，放在新建一個文件夾目錄下，并被名為引用，把其他邏輯部分放后者。

whay write this: 很多小白在看過很多教程之后仍然在敲代碼的時候不清楚應該以什么樣的步驟進行，那么這篇文章就一步一步分解整個過程，慢動作回放讓大家看的清清楚楚明明白白。

這個小Demo的功能是在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） -> ...

這里使用了create-react-app安裝并start后把一些沒用的文件清理掉，增加我們自己的文件

文件目錄如下：

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

好，目錄文件大概就是這樣子，正式開始敲代碼

我的位置：component/Texture.js

首先從component開刀（View視圖）：

引入必要的依賴：

import React from "react";

創建component（這里省去了propsTypes和defaultProps，僅僅為了方便展示）：

const Texture = (props) => (
  

    
{props.str}
    
  
);

我的位置action/action.js

然后定義action，在這個例子中，我們只有一個動作，修改input值：onChange，在action中命名為onChangeAction，并傳入一個參數e，返回包含type和value值的對象，最后暴露模塊：

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

export default onChangeAction;

我的位置reducer／reducer.js

定義完action之后，我們自然是想辦法處理這個action，那么下一步就是創建reducer：

reducer接收兩個參數，并返回新的state，第一個參數state要先設置初始值，否則返回undefined，第二個參數action，接收可能接收到的action參數。

state中設置我們在component中要用到并綁定在視圖中顯示的props值，就是此前定義的str和placeholder

在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和mapDispatchToProps兩個函數：

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

并將這倆貨和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目錄下，并被名為TextureContainer.js引用，把其他邏輯部分放后者。