React Redux步骤详细分析2

首先建立counter.js，是抽离出的页面UI的组件。

//01UI组件
function Counter(props){
    const {value,increament,decreament} = props
    return (
        <p>
        Clicked:{value} times
        <button onClick={increament}>+</button>
        <button onClick={decreament}>-</button>
     </p>
    )
}
export default Counter

创建container.js，与counter.js通过connect函数连接上（contain里有UI组件，有加强后的数据，有加强后的方法，它才是被包裹在App组件中的被Provide包裹的中心组件）

const Container = connect(mapStateToProps, mapDispatchToProps)(Counter)
export default Container

connect函数，为被包裹的组件App提供state数据和state的方法。

connect(mapStateToProps, mapDispatchToProps)(Counter)的两个参数第一个是用来增强数据state的，第二个是用来增强行为dispatch的。

const mapStateToProps = state => ({
  value: state
})
const mapDispatchToProps = {
  increment: () => Action.incrementAction(),
  decrement: () => Action.decrementAction()
}

创建contant.js函数，用来定义常量，方便后期管理。

export const increment = "increment"
export const decrement = "decrement"

创建actioncreate.js中定义函数，方便管理。并导出。

import * as CONSTANT from './constant';
export const incrementAction =()=>{
    return {type:CONSTANT.increment}
}
export const decrementAction =()=>{
    return {type:CONSTANT.decrement}
}

 

 关系顺序如下：

App用来放置Container容器渲染页面（用provider包裹起来）。

在Container容器中建立connect函数，连接counter与加强函数的数据和方法。

定义contant，用来定义常量，定义actioncreate定义方法。

以上，完成加强数据和函数的操作，在容器container中接受props传递过来的加强后的数据和方法，即可以完成页面的操作。

代码如下：按照思路顺序写代码

counter.js

//01UI组件
function Counter(props){
    const {value,increment,decrement} = props
    return (
        <p>
        Clicked:{value} times
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
     </p>
    )
}
export default Counter

 contant.js

export const increment = "increment"
export const decrement = "decrement"

reducer.js

//配合store执行  ; action{type:"increatment",data}
import * as CONSTANT from "../action/constant"
const defaultState = 0
const reducer = (state=defaultState, action) => {
    switch (action.type) {
        case CONSTANT.increment:  
            return state+1
        case CONSTANT.decrement:  
            return state-1
        default:
           return state
    }
}
export default reducer

 

actioncreate.js

import * as CONSTANT from './constant';
export const incrementAction =()=>{
    return {type:CONSTANT.increment}
}
export const decrementAction =()=>{
    return {type:CONSTANT.decrement}
}

 container.js

import React, {Component} from "react";
import store from "./store";
import * as Action from "./action/actionCreator"
import {  connect,Provider} from "react-redux"
import Counter from "./Counter"
//react-redux 容器组件 和 UI组件
//容器组件：业务逻辑和数据管理 等等 内部维护状态
//UI组件： 数据和行为 通过props传递 ，定义为function函数组件 
// const Container = connect(数据增强，行为增强)(ui组件)
//数据增强，
const mapStateToProps = state => ({
  value: state
})
const mapDispatchToProps = {
  increment: () => Action.incrementAction(),
  decrement: () => Action.decrementAction()
}
const Container = connect(mapStateToProps, mapDispatchToProps)(Counter)
export default Container

App.js

import store  from "./store"
import React from "react"
import Container from "./Container"
import { Provider } from "react-redux"
class App extends React.Component{
    render(){
      return(
          <Provider store={store}>
          <Container/>
          </Provider>
      )
    }
 }
 export default App