现在凌晨了，我还在代码的海洋中航行。想着自己就是海贼王路飞...
不扯淡了，讲个简单的例子：
输入框输入东西，实时显示到外面。
截图：
功能截图.png
文件目录结构：
项目结构.png
看下面代码注释：
1、index.js:
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './App'
import inputApp from './reducers'
render(
<Provider store={createStore(inputApp)}> // 创建store、reducers放这里
<App /> // 页面组件
</Provider>,
document.querySelector("#app")
);
2、app.js:
import React, { findDOMNode, Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import * as action from './actions'
class App extends Component {
render() {
return (
<div>
// this.props.propsValue本质就是一个从store中拿来的值(state)
<input type='text' value={this.props.propsValue} onChange={this.changeHandle.bind(this)} ref="input"/>
<div>
<br/>这是输入框绑定的：{this.props.propsValue}
</div>
</div>
);
}
changeHandle(){
const node = ReactDOM.findDOMNode(this.refs.input);
const value = node.value.trim();
this.props.change(value); // 调用了action方法、
}
}
function mapStateToProps(state) {
return {
propsValue: state.value // 从store中拿出的数据/值
}
}
//将state(进)的指定值映射在props上，将action的方法(出)映射在props上
export default connect(
mapStateToProps, //将state绑定到组件属性
action //将action方法绑定到了组件属性
)(App);
reducers.js和action.js最终都在app.js中使用，被引入到app.js！
3、reducers.js:
//reducer就是个function
//功能就是在action触发后，返回一个新的state
export default function change(state,action){
if(action.type=="change")
return{value:action.value};
return {value:'默认state的值'};
}
4、action.js:
//定义一个change方法，将来把它绑定到props上
export function change(value){
return{
type: "change",
value: value
}
}
一个截图，帮助大家理解如何使用
1.png
0.png
最后放上github地址，没事去玩玩吧。
https://github.com/allan2coder/Redux-Tutorial-Example/tree/master/0001input-redux
