react-redux的基本使用

一、react-redux的工作流程图

 二、react-redux的基本使用

1.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'))

// 监测App组件下的store状态改变就会刷新dom
store.subscribe(() => {
    ReactDom,render(<App/>, document.getElementById('root'))
})

2.App(容器组件的父组件)

import React, { component } from 'react'
import count from './containers/Count'
//这个状态最好在容器的父组件这里引入并传入容器组件
import store from './redux/store'

export default class App extends Component {
    render() {
        return (
            <div>
                <Count store={ store } />
            </div>
        )
    }
}

3、容器组件

//引入Count的UI组件
import CountUI from '../../component/Count'

//引入connect用于连接UI组件和redux
import { connect } from 'react-redux' 

/*
  1. mapStateToProps函数返回的一个对象
  2. 返回的对象中的key就作为传递给UI组件props的key，value就最为传递给UI组件props的value
  3. mapStateToProps用于传递状态   
  4. mapStateToProps的参数值是管理的状态
*/
function mapStateToProps(state) {
    return { count: state }
}
/*
  1. mapDispatchToProps函数返回的是一个对象
  2. 返回的对象中的key就作为传递给UI组件props的key，value就最为传递给UI组件props的value
  3. mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch) {
    return {
        jia: number => dispatch({ type: 'increment', data: number })
    }
}

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

4.CountUI组件

import React, { Component } form 'react'
import store from '../../redux/store'
// 引入actionCreator, 专门用于创建action对象
import { createIncrementAction } from '../../redux/count_action'
import 

export default class Count extends Component {
    //state = {carName: '奔驰大咖'}
    
    //componentDidMount() {
        // 检测redux中状态的变化，只要变化，就调用render
        //store.subscribe(() => {
            //this.setState({})
        //})
    //}

    // 加法
    increment = () => {
        const { value } = this.selectNumber
        store.dispatch(createIncrementAction(value*1))
    }
    
    render() {
        return (
            <div>
                <p>当前值为： {} </p>
                <select ref={c => this.selectNumber = c}>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>
                </select>
                <button onClick={this.increment}>+</button>
            </div>
        )
    }
}

存放状态的位置store.js

// 引入createStore, 专门用于创建redux中最为核心的store对象
import { createStore } from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'

// 暴露store
export default store = createStore(countReducer)

count_action.js(这个是生成action对象的) 

/*
    该文件专门为Count组件生成action对象
*/
export const createIncrementAction = data =>({ type: 'increment', data })

 count_reducer.js(初始化状态和加工状态)

/*
  1. 该文件是用于创建一个为Count组件服务的reducer， reducer的本质就是一个函数
  2. reducer函数会接收两个参数，分别为： 之前的状态(preState), 动作对象(action)
    参数二(action): {type: '', data: ''}
*/
export default function countReducer(preState, action) {
    // 从action对象中获取: type、data
    const { type, data } = action
    // 根据type决定如何加工数据
    switch (type) {
        case 'increment': // 如果是加
            return preState + data
        default:
            return 99
    }
}