1 redux初探、用react开发数值增值案例

含义

Redux是专门用作状态管理的js库，不是react插件库
可以用在react、angular、vue等项目中
能集中式管理react应用中多个组件共享的状态

使用

npx create-react-app redux1
cnpm install redux -S

关键字

store
reducer
action
subscribe

案例

1. 创建store、并传入reducer 
import { createStore } from 'redux'
import { counter } from './redux/reducers'
const store = createStore(counter)
2. 使用dispatch
store.dispatch({type: '', // action的名字 data: '', // 传给action的参数
})
3. reducer里处理数据
function counter(state = 0, action) {const { type, data } = action// 结构出dispatch的action type和参数，返回state
}
4. 监听state，触发更新
store.getState() // 获取最新的state
store.subscribe(render) // 触发ReactDOM.render

index.js 入口文件

import ReactDOM from 'react-dom'
import App from './App'
import { createStore } from 'redux'
import { counter } from './redux/reducers'
const store = createStore(counter)// state监听，变化时执行传入的方法
store.subscribe(render)
function render() {ReactDOM.render(<App store={store} />,document.getElementById('root'))
}
render()

reducers.js

export function counter(state = 0, action) {const { type, data } = actionconsole.log('reduce 触发了方法', type)console.log('reduce 接收参数', data)switch (type) {case 'add':return state + datacase 'minus':return state - datacase 'add_odd':if (data % 2 !== 0) {return state + data}case 'add_delay':// 这里实现不了延时返回，可以拿到外面调用方法处去做延时调用setTimeout(() => {return state + data}, 1000)default:return state}
}

action.js

export function add (param){return{type: 'add', // 方法名data: param // 对应参数}
}
export function minus (param){return{type: 'minus',data: param}
}
export function add_odd (param){return{type: 'add_odd',data: param}
}
export function add_delay (param){return{type: 'add_delay',data: param}
}

App.jsx UI

import React, { Component, createRef } from 'react'
import * as actions from './redux/action'export default class App extends Component {constructor(props) {super(props)this.selectRef = createRef()}compute = (method) => {const selectDom = this.selectRef.current,selectVal = Number(selectDom.value),store = this.props.store;console.log('app store/method', store, method)store.dispatch(actions[method](selectVal))}render() {const count = this.props.store.getState()console.log('重新render了', count)return (<><h1>数值：{count}</h1><select ref={this.selectRef}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={() => this.compute('add')}>+</button>&nbsp;<button onClick={() => this.compute('minus')}>-</button>&nbsp;<button onClick={() => this.compute('add_odd')}>奇数加</button>&nbsp;<button onClick={() => this.compute('add_delay')}>延迟加</button></>)}
}