(1).去除Count组件自身的状态
(2).src下建立:
-redux
-store.js
-count_reducer.js
(3).store.js：
1).引入redux中的createStore函数，创建一个store
2).createStore调用时要传入一个为其服务的reducer
3).记得暴露store对象
(4).count_reducer.js：
1).reducer的本质是一个函数，接收：preState,action，返回加工后的状态
2).reducer有两个作用：初始化状态，加工状态
3).reducer被第一次调用时，是store自动触发的，
传递的preState是undefined,
传递的action是:{type:'@@REDUX/INIT_a.2.b.4}
(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>
备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。
文档结构目录：
components\Count\index.jsx
import React, { Component } from 'react'
//引入store，用于获取redux中保存的状态
import store from '../../redux/store'
export default class Count extends Component {
//组件挂载完毕调用
componentDidMount(){
//检测redux中状态的变化，只要变化，就调用render
store.subscribe(()=>{
this.setState({})
})
}
add = () =>{
//获取状态值
const {value} = this.selectNumber
store.dispatch({type:'add',data:value*1})
}
jian = () =>{
//获取状态值
const {value} = this.selectNumber
store.dispatch({type:'jian',data:value*1})
}
//奇数+
oddIfOdd = () =>{
const {value} = this.selectNumber
const Count = store.getState()
console.log(value,Count);
if(Count % 2 !==0){
store.dispatch({type:'add',data:value*1})
}
}
addAsync = () =>{
//获取select选中的值
const {value} = this.selectNumber
setTimeout(()=>{
store.dispatch({type:'add',data:value*1})
},1500)
}
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.add}>+</button>
<button onClick={this.jian}>-</button>
<button onClick={this.oddIfOdd}>求和奇数+</button>
<button onClick={this.addAsync}>异步+</button>
</div>
)
}
}
redux\count_reducer.js
/*
该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
reducer函数会接收到两个参数，分别为:之前的状态（preState）动作对象（action）
*/
const initState = 0
export default function countReducer(preState = initState,action){
//从action对象中获取type、data
const {type,data} = action
//根据type决定如何加工数据
switch (type){
case 'add':
return preState + data
case 'jian':
return preState - data
default:
return preState
}
}
redux\store.js
/*
该文件用于暴露一个store对象，用于应用只有一个store对象
*/
//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer' //默认暴露
//默认暴露store
export default createStore(countReducer)
App.js
import React, { Component } from 'react'
import Count from './components/Count'
export default class App extends Component {
render() {
return (
<div>
<Count/>
</div>
)
}
}
index.js
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(<App/>,document.getElementById('root'))