组件化----组件抽离

功能分析：

在网页上显示两个个姓名及年龄的输入框及一个提交按钮，并让输入框的内容同步到网页上显示；

抽离前：

class App extends Component {
  state={name:'Guo努力',age:22}
  //同步数据
  handleChange1=(e)=>{
    this.setState({
      name:e.target.value
    })
  }
  handleChange2=(e)=>{
    this.setState({
      age:e.target.value
    })
  }

  //提交数据
  handleClick=()=>{
    const {name,age}=this.state
    //...
  }
  render() {
    return (
    <div>
      <h1>name:{this.state.name} <br/> age:{this.state.age}</h1>
      name:<input type='text' onChange={this.handleChange1}></input>
      <br/>
      age:<input type='text' onChange={this.handleChange2}></input>
      <br/>
      <button onClick={this.handleClick}>提交</button>
    </div>
    );
  }
}

将各个功能抽离出来，实现组件化

实现方法：

首先在项目中的 src 中定义一个文件夹 store 用来存储 action.js、constant.js、index.js、reducer.js 文件

 

1. App.js 中定义一个 UI ( 传递 props ) 组件用来返回数据

//引入文件
import  *as action from './store/action'

//定义UI组件
function StudentFrom(props) {
  const {name,age,handleChange1,handleChange2,handleClick}=props
  return (
    <div>
      <h1>name:{name} <br/> age:{age}</h1>
      name:<input type='text' onChange={handleChange1}></input>
      <br/>
      age:<input type='text' onChange={handleChange2}></input>
      <br/>
      <button onClick={handleClick}>提交</button>
    </div> 
    );
}

2. App.js 中定义映射数据及方法

//映射数据及方法
const mapStateToProps = state =>({
  name:state.name,
  age:state.age,
})

const mapDispatchTpProps = {
  handleChange1:(e)=>action.nameAction(e.target.value),
  handleChange2:(e)=>action.ageAction(e.target.value),
  handleClick:()=>action.commitAction(),
}

在 action.js 中写入：

//from
export const nameAction = (payload) =>{
    return{
        type:constant.FORM_NAME,
        payload:payload
    }
}
export const ageAction = (payload) =>{
    return{
        type:constant.FORM_AGE,
        payload:payload
    }
}
export const commitAction = () =>{
    return{
        type:constant.FORM_COMMIT
    }
}

在 constant.js 中写入： 

//from
export const FORM_NAME='FORM_NAME'
export const FORM_AGE='FORM_AGE'
export const FORM_COMMIT='FORM_COMMIT'

3. 定义容器组件：

//定义容器组件
const Container = connect (mapStateToProps,mapDispatchToProps)(StudentFrom)

4.将定义的组件挂载到App容器上：

class App extends Component {
  render() {
    return (
    <Provider store={store}>
      <Container/>
    </Provider>
    );
  }
}

在 reducer.js 中写入： 

import *as constant from './constant'

const defaultState={
    name:"",
    age:'',
}

const reducer = (state=defaultState,action)=>{
    let newState = JSON.parse(JSON.stringify(state))
    switch (action.type) {
        case constant.FORM_NAME:      
            newState.name=action.payload
            return newState
        case constant.FORM_AGE:
            newState.age=action.payload
            return newState
        case constant.FORM_COMMIT:
            // const {name,age}=state
            return {mage:'ok',result:1}
        default:
            return state
    }
}

export default reducer

在 index.js 中写入： 

import {createStore} from 'redux'
import reducer from './reducer.js'


const store =createStore(reducer)

export default store

 抽离后：

 这样......我们就可以实现组件化..................