企业官网建设流程全解析

成熟的项目中，会在src文件目录里，新建redux用于集中管理关于redux的操作；在redux中新建actions文件夹用于集中管理redux_action的操作；新建reducers文件夹用于集中管理诸多reducer。

一、组件

Person组件

import React, { Component } fron 'react' export default class Person extends Component { addPerson = () =>{ const name = this.nameNode.value const age = this.ageNode.value const personObj = { id:newDate(),name,age } } render(){ <input ref={ c => this.nameNode = c } placeholder="请输入姓名" /> <input ref={ c => this.ageNode = c } placeholder="请输入年龄" /> <button onClick="this.addPerson">添加</button> } }

改变Preson组件为容器组件并拿到reducer中存储的初始值进行渲染

import React, { Component } fron 'react' import { connect } from 'react-redux' import { createAddPersonAction } from '../../redux/actions/person' class Person extends Component { addPerson = () =>{ const name = this.nameNode.value const age = this.ageNode.value const personObj = { id:newDate(),name,age } this.props.jiaYiRen(personObj) this.nameNode.value = '' this.ageNode.value = '' } render(){ <p>Count组件求和为{this.props.he}</p> <input ref={ c => this.nameNode = c } placeholder="请输入姓名" /> <input ref={ c => this.ageNode = c } placeholder="请输入年龄" /> <button onClick="this.addPerson">添加</button> <ul> { this.props.preson.map(p=>{ return <li key={p.id}>{p.name}---{p.age}<li/> }) } </ul> } } export default connect( state =>( { persons：state.rens, he:state.he//跨组件共享数据 } ),//因为模块五汇总了reducer { jiaYiRen:createAddPersonAction}//映射操作状态的方法 )

Count组件

import { React，{ Component } } from 'react' //引入store import store from '../redux/store' //引入createIncrementAction、createDecrementAction、createIncrementAsyncAction 。。。。。 //引入connect用于连接UI组件与redux import { connect } from 'react-redux' class Count extends Component { state= { car:'0' } increment = () => { const { value } = this.selectNumber } decrement = () => { const { value } = this.selectNumber } incrementIfOdd =() => { const { value } = this.selectNumber } incrementAsync = () => { const { value } = this.selectNumber } render( <div> <h1>当前求和为：{ this.props.count },下方组件总人数为{ this.props.renshu }</h1> <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> <button onClick = { this.decrement }>-</button> <button onClick = { this.incrementIfOdd }>当前求和为奇数再加</button> <button onClick = { this.incrementAsync }>异步加</button> </div> ) } export default connect( //state => {( count：state )}},因为模块五汇总了reducer，而总的reducer不单单是一个number，而是一个对象，所以获取发生了变化 state => {( count：state.he, renshu:state.rens.length,//跨组件获取共享数据 )}, { jia：createIncrementAction, jian：createDecrementAction, jiaAsync：createIncrementAsyncAction, } )(Count)

二、constant

与actions文件夹同级别的constant文件用于定义action对象中type类型的常量值

export const INCREMENT = "increment" export const DECREMENT = "decrement" export ADD_PERDON = "add_person"

三、action

在actions文件夹中新建person.js文件，用于管理Preson组件用到的action

import { ADD_PERSON } from "../constant" export const createAddPersonAction = (personObj) =>( { type : ADD_PERSON,data:personObj} ){ }

在actions文件夹中新建count.js文件，用于管理Count组件用到的action

import { INCREMENT，DECREMENT } from './constant.js' //同步action，就是指action的值为Object类型的一般对象 export const createIncrementAction = data =>{ ( type:INCREMENT,data ) } export const createDecrementAction = data =>{ ( type:DECREMENT,data ) } //异步action，就是指action的值为函数,异步action中一般会调用同步action export const createDecrementAsyncAction = (data,time) => { return () => { setTimeout(()=>{ //store.dispatch({ type:INCREMENT,data }) dispatch(createIncrementAction(data)) },time) } }

四、reducer

1、在reducers文件夹新建person.js文件，用于管理Preson组件用到的redux

import { ADD_PERSON } from "../constant" const initState = [ { name:"Tom",age:18 } ] //初始数据 export default function personReducer(preState = initState,action){ const { type,data } = action switch (type) { case ADD_PERSON: return [ data,...preState ] dafault: return preState } }

2、在reducers文件夹新建count.js文件，用于管理Count组件用到的redux

import { INCREMENT,DECREMENT } from "../contant" const initState = 0 //初始状态 export default function countReducer( preState = initState,action ){ const { type,action } = action switch ( type ) { case INCREMENT: return preSate + data case DECREMENT: return preState - date dafault: return preSatet } }

五、与actions、reducers文件夹同级别的store.js文件

import { createStore,applyMiddleware,combineReducers } from "redux" import countReducer from './reducers/count' import presonReducer from './reducers/person' import thunk from 'redux-thunk' //用于支持异步action //汇总所有的reducer变为一个总的reducer const allReducer = combineReducers({ he:countReducer, rens:presonReducer }) //export dafult createStore(countReducer,applyMiddleware(thunk)) 单个reducer，无法传入多个 export dafult createStore(allReducer,applyMiddleware(thunk))

六、App.jsx文件

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