<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>redux</title></head><body><div id="root"></div></body>
</html>
import React, {Component} from 'react';
import Count from "./components/Count";class App extends Component {render() {return (<div><Count/></div>);}
}export default App;
import React from "react";
import ReactDOM from 'react-dom'
import App from './App'import store from './redux/store'ReactDOM.render(<App/>,document.getElementById('root'))
// 检测redux中状态的变化，只要变化，就调用render
store.subscribe(()=>{ReactDOM.render(<App/>,document.getElementById('root'))
})
- src/components/Count/index.jsx
import React, {Component} from 'react';
// 引入store,用于获取redux中保存状态
import store from '../../redux/store'
// 引入actionCreator,专门用于创建action对象
import {createIncrementAction,createDecrementAction} from '../../redux/count_action'
class Count extends Component {// count已经交给了redux去管理了state = {carName:'奔驰c63'}// componentDidMount() {// // 检测redux中状态的变化，只要变化，就调用render// store.subscribe(()=>{// this.setState({})// })// }// 加法increment=()=>{const {value} = this.selectNumber// 通知redux加value// store.dispatch({type:'increment',data:value*1})store.dispatch(createIncrementAction(value*1))}// 减法decrement=()=>{const {value} = this.selectNumber// store.dispatch({type:'decrement',data:value*1})store.dispatch(createDecrementAction(value*1))}// 奇数再加incrementIfOdd=()=>{const {value} = this.selectNumberconst count = store.getState()if(count % 2 !== 0) {// store.dispatch({type:'increment',data:value*1})store.dispatch(createIncrementAction(value*1))}}// 异步加incrementAsync=()=>{const {value} = this.selectNumbersetTimeout(()=>{// store.dispatch({type:'increment',data:value*1})store.dispatch(createIncrementAction(value*1))},500)}render() {return (<div><h1>当前求和为：{store.getState()}</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 Count;
- src/components/redux/constant.js
/*** 该模块是用于定义action对象中type类型的常量值,目的只有一个：* 便于管理的同时防止程序员单词写错*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
- src/components/redux/count_action.js
/*
* 该文件专门为Count组件生成action对象
* */
import {INCREMENT,DECREMENT} from './constant'
/*
// 版本1
function createIncrementAction (data) {return {type:'increment',data}
}function createDecrementAction (data) {return {type:'decrement',data}
}*/// 版本2
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})
- src/components/redux/count_reducer.js
/*
* 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
* 2.reducer函数会接到两个参数，分别为: 之前的状态（preState），动作对象(action)
* */
import {INCREMENT,DECREMENT} from './constant'
// 初始化版本1
/*
function countReducer(preState,action) {if(preState === undefined) preState = 0// 从action对象中获取：type,dataconst {type,data} = action// 根据type决定如何加工数据switch (type) {case 'increment': // 如果是加return preState + datacase 'decrement': // 如果是减return preState - datadefault:return preState}
}*/// 初始化版本2
const initState = 0
export default function countReducer(preState=initState,action) {// 从action对象中获取：type,dataconst {type,data} = action// 根据type决定如何加工数据switch (type) {case INCREMENT: // 如果是加return preState + datacase DECREMENT: // 如果是减return preState - datadefault:return preState}
}
- src/components/redux/store.js
/*
* 该文件专门用于暴露一个store对象，整个应用只有一个store对象
* */// 引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'
// 暴露store
export default createStore(countReducer)
## 2.求和案例_redux完整版新增文件:1.count_action.js 专门用于创建action对象2.constant.js 放置由于编码疏忽写错action中的type
