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

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

這個(gè)小Demo的功能是在input標(biāo)簽中輸入內(nèi)容，同步顯示在上方的p標(biāo)簽內(nèi)，DEMO很簡單，大神們輕噴～?

項(xiàng)目代碼在這里：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數(shù)據(jù)流，從這個(gè)圖中我們可以按照下面這個(gè)流程來敲代碼：

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";

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

const Texture = (props) => (
  

    
{props.str}
    
  
);

我的位置action/action.js

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

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

export default onChangeAction;

我的位置reducer／reducer.js

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

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

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

在reducer內(nèi)部，需要用到switch檢測action的type并根據(jù)不同的type來處理相應(yīng)的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內(nèi)，既然action和reducer都配置好了，接下來就輪到store了

引入redux中createStore模塊和之前定義好的reducer，創(chuàng)建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的聯(lián)系了，那么我們只需要react-redux提供的connect和Provider即可：

導(dǎo)入相關(guān)模塊：

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

創(chuàng)建mapStateToProps和mapDispatchToProps兩個(gè)函數(shù)：

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中引入這個(gè)組件即可。

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

const App = () => (
  
);

export default App;

另外，component/Texture.js中視圖部分最好多帶帶出來，放在新建一個(gè)文件夾view目錄下，并被名為TextureContainer.js引用，把其他邏輯部分放后者。