Redux入门教程2-简单实例input-redux

现在凌晨了，我还在代码的海洋中航行。想着自己就是海贼王路飞...
不扯淡了，讲个简单的例子：
输入框输入东西，实时显示到外面。
截图：

功能截图.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