React，安卓面试题初级

/*

该文件专门为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)

}

}

person.js

import {ADD_PERSON} from '../constant'

//创建增加一个人的action动作对象

export const addPerson = personObj => ({type:ADD_PERSON,data:personObj})

• 统一常量管理

/*

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

*/

export const INCREMENT = 'increment'

export const DECREMENT = 'decrement'

export const ADD_PERSON = 'add_person'

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

}

}

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

}

}

index.js — 汇总所有的reducer

/*

该文件用于汇总所有的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

})

• store对象存储

/*

该文件专门用于暴露一个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)))

• 创建组件使用store数据

Count

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 (