首页 > 编程札记 > 编程

React学习27（react

阅读：评论：0

React学习27（react

项目结构

准备工作

1）定义一个person组件，和count组件通过redux共享数据

2）为person组件编写：reducer ，action和contant常量

3）重点：Person的reducer和Count的reducer要用combineReducers进行合并，合并后的总状态

是一个对象

4）交给store的是总的reducer，最后注意在组件中取出状态的时候，记得取到位

代码展示

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'
import store from './redux/store'//为provider服务
import {Provider} from 'react-redux&#der(
<Provider store= {store}><App/>
</Provider>,
ElementById('root')
)// 检测redeux中状态的改变，若redux的状态发生了改变，那么重新渲染App组件
//使用react-redux创建容器组件后，react-redux可以自己实现检测state中状态的改变，所以可以删除
//以下代码
// store.subscribe(() => {
//   der(<App/>,ElementById('root'))
// })

App.jsx

import React, { Component } from 'react'
import Count from './containers/Count'
import Person from './containers/Person'export default class App extends Component {render() {return (<div><Count/><hr/><Person/></div>)}
}

redux-store.js

/*该文件专门用于暴露一个store对象，整个应用只有一个store对象
*///引入createStore，专门用于创建redux中最为核心的store对象,applyMiddleware用于支持
//异步action的中间件
//combineReducers用于合并多个reducer
import {createStore,applyMiddleware,combineReducers} from 'redux'//引入为Count组件服务的reducer
import countReducer from './reducers/count'//引入为Person组件服务的reducer
import personReducer from './reducers/person'//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'//汇总所有的reducer变为一个总的reducers
const allReducer = combineReducers({he:countReducer,rens:personReducer
})export default createStore(allReducer, applyMiddleware(thunk))

redux-content.js

/*该文件是用于定义action对象中的type类型的常量值目的只有一个：防止程序员在编码的同时单次写错
*/export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const ADD_PERSON = 'add_person'

redux-actions-count.jsx

/*该文件专门为count组件生成action对象
*/
import { INCREMENT, DECREMENT } from "../constant"
//完整写法
// function createIncrementAction(data) {
//   return {type:'increment', data }
// }
//简写形式
//同步action，就是值action的返回值是Object类型的一般对象
export const createIncrementAction = data =>( {type:INCREMENT, data })//完整写法
// function createDecrementAction(data) {
//   return {type:'decrement', data}
// }
export const createDecrementAction = data =>( {type: DECREMENT, data })//异步action，就是值action的返回值是函数，异步action一般都会调用同步action
//异步action不是必须要用的
export const createIncrementAsyncAction = (data, time) =>{return (dispatch) => {setTimeout(() => {dispatch(createIncrementAction(data))},time)}
}

redux-actions-person.js

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

redux-reducers-count.js

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

redux-reducers-person.js

import { ADD_PERSON } from "../constant"//初始化人的列表
const initState = [{id:'001',name:'tom', age:18}]export default function personReducer(preState=initState, action) {const {type,data} = actionswitch(type) {case ADD_PERSON:return [data, ...preState]// 若是添加一个人default:return preState}
}

containers-count-index.jsx

//引入CountUI组件
// import CountUI from '../../compoents/Count'import React, { Component } from 'react'//引入connect用于连接UI组件和redux
import {connect} from 'react-redux'
//引入action
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction
} from '../../redux/actions/count'//定义UI组件
class Count extends Component {state = {carName:'奔驰c63'}//  把状态交给reducer之后组件也可以有自己独用的状态increment = () => {const {value} = this.selectNumthis.props.jia(value*1)}decrement = () => {const {value} = this.selectNumthis.props.jian(value*1)}incrementOdd = () => {const {value} = this.selectNumif(unt % 2 !== 0) {this.props.jia(value*1)}}incrementWait = () => {const {value} = this.selectNumthis.props.jiaAsync(value*1,400)}render() {console.log('UI组件接收到的props是：',this.props);return (<div><h2>我是Count组件,下方组件总人数是{shu}</h2><h3>当前求和为：{unt}</h3><select ref={c => {this.selectNum = 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.incrementOdd}>当前求和为奇数再加</button>&nbsp;<button onClick= {this.incrementWait}>等一等再加</button></div>)}
}//使用connect()()创建并暴露一个Count容器组件
export default connect(state => ( {count:state.he,s.length}), //mapDispatchToProps的一般写法// dispatch => ({//   jia:number => dispatch(createIncrementAction(number)),//   jian:number => dispatch(createDecrementAction(number)),//   jiaAsync:(number,time) =>dispatch(createIncrementAsyncAction(number,time)) // })//mapDispatchToProps的简写,dispatch由react-redux来完成,程序员工作中用这种方法{jia:createIncrementAction,jian:createDecrementAction,jiaAsync:createIncrementAsyncAction})(Count)

containers-Person-index.jsx

import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {creatAddPersonAction} from '../../redux/actions/person'class Person extends Component {addPerson = () => {const name = this.nameNode.valueconst age = this.ageNode.valueconst personObj = {id:nanoid(), name, age}this.props.jiayiren(personObj)this.nameNode.value = ''this.ageNode.value = ''}render() {return (<div><h2>我是person组件,上方组件求和为{this.props.he}</h2><input ref={c => this.nameNode = c} type="text" placeholder="请输入姓名"/>&nbsp;<input ref={c => this.ageNode = c} type="text" placeholder="请输入年龄"/>&nbsp;<button onClick= {this.addPerson}>添加</button><ul>{this.props.yiduiren.map((p) => {return <li key={p.id}>{p.name}--{p.age}</li>})}</ul></div>)}
}export default connect(state => ({s,he:state.he}),// 映射状态{jiayiren:creatAddPersonAction}//映射操作状态的方法
)(Person)