- public/index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>redux</title></head><body><div id="root"></div></body>
</html>- src/App.jsx
import React, {Component} from 'react';
import Count from "./components/Count";class App extends Component {render() {return (<div><Count/></div>);}
}export default App;- src/index.js
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'class Count extends Component {// count已经交给了redux去管理了state = {carName:'奔驰c63'}// componentDidMount() {// // 检测redux中状态的变化，只要变化，就调用render// store.subscribe(()=>{// this.setState({})// })// }// 加法increment=()=>{const {value} = this.selectNumber// 通知redux加valuestore.dispatch({type:'increment',data:value*1})}// 减法decrement=()=>{const {value} = this.selectNumberstore.dispatch({type:'decrement',data:value*1})}// 奇数再加incrementIfOdd=()=>{const {value} = this.selectNumberconst count = store.getState()if(count % 2 !== 0) {store.dispatch({type:'increment',data:value*1})}}// 异步加incrementAsync=()=>{const {value} = this.selectNumbersetTimeout(()=>{store.dispatch({type:'increment',data: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/redux/count_reducer.js
/*
* 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
* 2.reducer函数会接到两个参数，分别为: 之前的状态（preState），动作对象(action)
* */// 初始化版本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/redux/store.js
/*
* 该文件专门用于暴露一个store对象，整个应用只有一个store对象
* */// 引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'
// 暴露store
export default createStore(countReducer)
## 1. 求和案例_redux精简版(1).去除Count组件自身的状态(2).src下建立:-src-redux-store.js-count_reducer.js(3).store.js:1).引入redux中的createStore函数，创建一个store2).createStore调用时要传入一个为其服务的reducer3).记得暴露store对象(4).count_reducer.js:1).reducer的本质是一个函数，接收:preState,action，返回加工后的状态2).reducer有两个作用：初始化状态，加工状态3).reducer被第一次调用时，是store自动触发的，传递的preState是undefined(5).在index.js中检测store中状态的改变，一旦发生改变重新渲染<App/>备注:redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写