[JavaScript知识库]React_redux

一. React_redux工作原理图

二. React_redux工作具体代码

1. src目录结构

该项目有Count和Person两个组件

2. index.js文件

2.1 引入Provider组件

目的： 此处需要用Provider包裹App，目的是让App所有的后代容器组件都能接收到store

import { Provider } from 'react-redux'

2.2 使用Provider

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

3. App.js文件

引入并使用容器组件

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>
    )
  }
}

4. redux文件夹

4.1 redux > store.js

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

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


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

4.2 redux > constant.js

该模块是用于定义action对象中type类型的常量值
目的只有一个：便于管理的同时，防止程序员写错

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const ADD_PERSON = 'add_person'

4.3 redux > action
4.3.1 Count 组件的action
（1）引入constant.js

import { INCREMENT, DECREMENT } from '../constant'

（2）同步action

同步action–就是值action的值为Object类型的一般对象

export const increment = data => ({ type: INCREMENT, data })
export const decrement = data => ({ type: DECREMENT, data })

（3）异步action

异步action–就是值action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的

export const incrementAsync = (data, time) => {
    return (dispatch) => {
        setTimeout(()=>{
            //通知redux加data
            dispatch(increment(data))
        },time)
    }
}

4.3.2 Person组件的action

import { ADD_PERSON } from '../constant'
//创建增加一个人的action对象
export const addPerson = personObj => ({ type: ADD_PERSON, data: personObj })

4.4 redux > reducer
4.4.1 redux > reducer > index.js

该文件用于汇总所有的reducer作为一个总的reducer

// 引入combineReducers，用于汇总多个reducer
import {combineReducers} from 'redux'
//引入为count组件服务的reducer
import count from './count'
//引入为person组件服务的reducer
import person from './person'

//combineReducers中传入的对象就是redux帮我们保存的总状态对象
// 汇总所有的reduser变成一个总的reduser
export default combineReducers({
    // key:value
    count,
    person
})

4.4.2 redux > reducer > 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) {
    //从action对象中获取：type,data
    const { type, data } = action
    //根据type决定如何加工数据
    switch (type) {
        case INCREMENT://如果是加
            return preState + data
        case DECREMENT://如果是减
            return preState - data
        default:
            return preState
    }
}

4.4.2 redux > reducer > person.js

import {ADD_PERSON} from '../constant'

//初始化状态
const initState = [{ id: '001', name: 'tom', age: 18 }]
export default function personReducer(preState = initState, action){
    // 从action对象中获取type,data
    const {type,data}=action

    //根据type决定如何加工数据
    switch (type) {
        case ADD_PERSON://若是添加一个人
            return [data,...preState]
        default:
            return preState
    }
}

5.container容器组件

5.1 引入connect用于连接UI组件与redux

import { connect } from 'react-redux'
import { increment } from '../../redux/actions/count'

5.2 使用connect()()创建并暴露一个Count的容器组件

export default connect(
	//映射状态
    state => ({ 
        count: state.count ,
        persons:state.person.length
    }),
    
    // mapDispatchToProps的简写:对象自动调用dispatch
    //映射状态的方法
    {
    	//key:value
    	//value:从redux/actions/count引入
        increment:imcrement
        decrement,
        incrementAsync
    }
)(Count)

5.3 定义UI组件 （以求和以及person组件传参为例）
5.3.1 render中

 render() {
       // console.log(this.props);
        return (
            <div>
            	//count和persons是从容器组件中传递过来的
                <h3>当前求和为：{this.props.count},下方人数为：{this.props.persons}</h3>
                <br />
                <button onClick={this.increment}>+</button>
            </div>
        )
    }

5.3.2 加法 imcrement 方法

increment = () => {
        // 用户加多少
        const { value } = this.selectNumber
        //通知redux加value
        this.props.increment(value * 1)
    }