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) => (
<div>
<h2>{props.str}</h2>
<input onChange={props.onChange} placeholder={props.placeholder} />
</div>
);我的位置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 = () => (
<Provider store={store}>
<TextureConnect />
</Provider>
);
export default TextureWrapper;我的位置：App.js
末了，功德圆满，在App.js中引入这个组件即可。
//requirement
import React from 'react';
import TextureWrapper from './component/Texture';
const App = () => (
<TextureWrapper />
);
export default App;别的，component/Texture.js中视图部份最好零丁出来，放在新建一个文件夹view目次下，并被名为TextureContainer.js援用，把其他逻辑部份放后者。
