react-redux的基本使用

目录结构

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
ReactDOM.render(<App/>,document.getElementById("root"))

//监测redux中状态的改变,如redux的状态发生了改变，那么重新渲染App组件
store.subscribe(()=>{
    ReactDOM.render(<App/>,document.getElementById("root"))
})

App.js

import React, { Component } from 'react'
import Count from './containers/Count'
//引入store
import  store from './redux/store'

export default class App extends Component {
    render() {
        return (
            <div>
                {/* 给容器组件传递store */}
               <Count store={store}/>
            </div>
        )
    }
}

component/Count/index.jsx

import React, { Component } from 'react'
export default class Count extends Component {
    state={carName:'奔驰'}
    //加法
    increment=()=>{
        const{value}=this.selectNumber
        this.props.add(value*1)
    }
    //减法
    decrement=()=>{
        const{value}=this.selectNumber
        if(this.props.count%2!==0){
            this.props.jian(value*1)
        }
    }
    //奇数再加
    incrementIfOdd=()=>{
        const{value}=this.selectNumber
        if(this.props.count%2!==0){
            this.props.add(value*1)
        }
    }
    //异步加
    incrementAsync=()=>{
        const{value}=this.selectNumber
        this.props.addAsync(value*1,500)
    }
    render() {
       // console.log('UI组件接收到的props是',this.props)
        return (
            <div>
                <h1>当前求和为：{this.props.count}</h1>&nbsp;
                <select ref={c=>this.selectNumber=c}>&nbsp;
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>&nbsp;
            </div>
        )
    }
}

containers/index.jsx

//引入Count的UI组件
import CountUI from '../../components/Count'
import{createDecrementAction, createIncrementAction,createIncrementAsyncAction} from '../../redux/count_action'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
/**
 * 1.mapStateToProps函数返回的是一个对象
 * 2.返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3.mapStateToProps用于传递状态
 */
function mapStateToProps(state){
    return{count:state}
}

/**
 * 1.mapDispatchToProps函数返回的是一个对象
 * 2.返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3.mapStateToProps用于传递状态操作的方法
 */
function mapDispatchToProps(dispatch){
    return{
        add:number=>dispatch(createIncrementAction(number)),
        jian:number=>dispatch(createDecrementAction(number)),
        addAsync:(number,time)=>dispatch(createIncrementAsyncAction(number,time))
    }
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

redux/constant.js

/**该模块是用于定义action对象中type类型的常量值 ,目的只有一个:便于管理的同时防止程序员单词拼写错误*/
export const INCREMENT='increment'
export const DECREMENT='decrement'

redux/count_action.js

/**该文件专门为Count组件生成action对象 */
import{INCREMENT,DECREMENT} from './constant'

//同步action，就是指action的值为Object类型的一般对象
export const  createIncrementAction=data=>({type:INCREMENT,data})
export const  createDecrementAction=data=>({type:DECREMENT,data})

//所谓的异步action，就是指action的值为函数,异步action中一般都会调用同步action
export const createIncrementAsyncAction=(data,time)=>{
    return(dispatch)=>{
        setTimeout(() => {
            dispatch(createIncrementAction(data))
        }, time);
    }
}

redux/count_reducer.js

/**
 * 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质是一个函数
 * 2.reducer函数会接到两个参数，分别为：之前的状态(preState),动作对象(action)
 */
import{INCREMENT,DECREMENT} from './constant'
const initState=0//初始化状态
export default function countReducer(preState=initState, action) {
    console.log(preState,action)
  //从action对象中获取：type、data
  const { type, data } = action;
  //根据type决定如何加工数据
  switch (type) {
    case INCREMENT:
      return preState + data
    case DECREMENT:
      return preState - data
    default:
        return preState
  }
}

store.js

/**该文件专门用于暴露一个store对象，整个应用只有一个store对象 */
//引入createStore,专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'
//暴露store
export default createStore(countReducer,applyMiddleware(thunk))