React---react-redux的使用

一、基本使用

　　　 (1).明确两个概念：

                        1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。

                        2).容器组件：负责和redux通信，将结果交给UI组件。

            (2).如何创建一个容器组件————靠react-redux 的 connect函数

                            connect(mapStateToProps,mapDispatchToProps)(UI组件)

                                -mapStateToProps:映射状态，返回值是一个对象

                                -mapDispatchToProps:映射操作状态的方法，返回值是一个对象

            (3).备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入

            (4).备注2：mapDispatchToProps，也可以是一个对象

　　　 (5).安装：npm install react-redux

二、优化

　　　 (1).容器组件和UI组件整合一个文件

            (2).无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。

            (3).使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。

            (4).mapDispatchToProps也可以简单的写成一个对象

            (5).一个组件要和redux“打交道”要经过哪几步？

                            (1).定义好UI组件---不暴露

                            (2).引入connect生成一个容器组件，并暴露，写法如下：

                                    connect(

                                        state => ({key:value}), //映射状态

                                        {key:xxxxxAction} //映射操作状态的方法

                                    )(UI组件)

                            (4).在UI组件中通过this.props.xxxxxxx读取和操作状态

三、数据共享

            (1).定义一个Pserson组件，和Count组件通过redux共享数据。

            (2).为Person组件编写：reducer、action，配置constant常量。

            (3).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，

                    合并后的总状态是一个对象！！！

            (4).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。

 

四、react-redux开发者工具的使用

　　     (1).npm install redux-devtools-extension

            (2).store中进行配置

                    import {composeWithDevTools} from 'redux-devtools-extension'

                    const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

五、代码

1. App.jsx

import React, { Component } from 'react'
import Count from './containers/Count' //引入的Count的容器组件
import Person from './containers/Person' //引入的Person的容器组件

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

2. index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
import {Provider} from 'react-redux'

ReactDOM.render(
    /* 此处需要用Provider包裹App，目的是让App所有的后代容器组件都能接收到store */
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
)

3.redux/store.js

/* 
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入汇总之后的reducer
import reducer from './reducers'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//引入redux-devtools-extension
import {composeWithDevTools} from 'redux-devtools-extension'

//暴露store 
export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))

4.constant.js

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

5.redux/reducers/index.js

/* 
    该文件用于汇总所有的reducer为一个总的reducer
*/
//引入combineReducers，用于汇总多个reducer
import {combineReducers} from 'redux'
//引入为Count组件服务的reducer
import count from './count'
//引入为Person组件服务的reducer
import persons from './person'

//汇总所有的reducer变为一个总的reducer
export default  combineReducers({
    count,
    persons
})

6.redux/reducers/count.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('countReducer@#@#@#');
    //从action对象中获取：type、data
    const {type,data} = action
    //根据type决定如何加工数据
    switch (type) {
        case INCREMENT: //如果是加
            return preState + data
        case DECREMENT: //若果是减
            return preState - data
        default:
            return preState
    }
}

7.redux/reducers/person.js

import {ADD_PERSON} from '../constant'

//初始化人的列表
const initState = [{id:'001',name:'tom',age:18}]

export default function personReducer(preState=initState,action){
    // console.log('personReducer@#@#@#');
    const {type,data} = action
    switch (type) {
        case ADD_PERSON: //若是添加一个人
            //preState.unshift(data) //此处不可以这样写，这样会导致preState被改写了，personReducer就不是纯函数了。
            return [data,...preState]
        default:
            return preState
    }
}

8.redux/actions/count.js

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

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

//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const incrementAsync = (data,time) => {
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(increment(data))
        },time)
    }
}

9.redux/actions/person.js

import {ADD_PERSON} from '../constant'

//创建增加一个人的action动作对象
export const addPerson = personObj => ({type:ADD_PERSON,data:personObj})

10.containers/count.jsx

import React, { Component } from 'react'
//引入action
import {
    increment,
    decrement,
    incrementAsync
} from '../../redux/actions/count'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

//定义UI组件
class Count extends Component {

    state = {carName:'奔驰c63'}

    //加法
    increment = ()=>{
        const {value} = this.selectNumber
        this.props.increment(value*1)
    }
    //减法
    decrement = ()=>{
        const {value} = this.selectNumber
        this.props.decrement(value*1)
    }
    //奇数再加
    incrementIfOdd = ()=>{
        const {value} = this.selectNumber
        if(this.props.count % 2 !== 0){
            this.props.increment(value*1)
        }
    }
    //异步加
    incrementAsync = ()=>{
        const {value} = this.selectNumber
        this.props.incrementAsync(value*1,500)
    }

    render() {
        //console.log('UI组件接收到的props是',this.props);
        return (
            <div>
                <h2>我是Count组件,下方组件总人数为:{this.props.renshu}</h2>
                <h4>当前求和为：{this.props.count}</h4>
                <select ref={c => this.selectNumber = c}>
                    <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>
        )
    }
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(
    state => ({
        count:state.count,
        personCount:state.persons.length
    }),
    {increment,decrement,incrementAsync}
)(Count)

11.containers/persion.jsx

import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {addPerson} from '../../redux/actions/person'

class Person extends Component {

    addPerson = ()=>{
        const name = this.nameNode.value
        const age = this.ageNode.value*1
        const personObj = {id:nanoid(),name,age}
        this.props.addPerson(personObj)
        this.nameNode.value = ''
        this.ageNode.value = ''
    }

    render() {
        return (
            <div>
                <h2>我是Person组件,上方组件求和为{this.props.count}</h2>
                <input ref={c=>this.nameNode = c} type="text" placeholder="输入名字"/>
                <input ref={c=>this.ageNode = c} type="text" placeholder="输入年龄"/>
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {
                        this.props.persons.map((p)=>{
                            return <li key={p.id}>{p.name}--{p.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({
        persons:state.persons,
        count:state.count
    }),//映射状态
    {addPerson}//映射操作状态的方法
)(Person)