目录

redux

纯函数和高阶函数：

 redux 开发工具使用

react-redux

redux

1. 结构：

 count--index.jsx

import React, { Component } from 'react'
import store from '../../redux/store'
import { acDecrement,acIncrement,acAsyncIncrement } from '../../redux/count_action'export default class Count extends Component {state = {count:0}// store 里面的数据法神变化，更新页面componentDidMount(){store.subscribe(()=>{this.setState({})})}increment = ()=>{let value = this.selectRef.valuestore.dispatch(acIncrement(value*1))}decrement = ()=>{let value = this.selectRef.valuestore.dispatch(acDecrement(value*1))}handleOdd = ()=>{let value = this.selectRef.valueif(store.getState() % 2 !== 0) store.dispatch(acIncrement(value*1))}handleAsync = ()=>{let value = this.selectRef.value// let count = this.state.count// setTimeout(()=>{//   store.dispatch(acIncrement(value*1))// },500)store.dispatch(acAsyncIncrement(value*1,500))}render() {// console.log(this)return (
当前求和{store.getState()}
this.selectRef = c}>123+-奇数＋异步＋
)}
}

redux--store.js

import {legacy_createStore as createStore,applyMiddleware} from 'redux'
// 创建store需要引入为redux服务的reducer
import reducer from './count_reducer'// 引入 异步action 需要的中间件 thunk ,通过applyMiddleware使用此中间件
import thunk from 'redux-thunk'//暴露store
export default createStore(reducer,applyMiddleware(thunk))

redux--reducer.js

// 就是一个函数
// 接收两个参数： preState 和 actionlet initCount = 5
export default function countReducer(preState=initCount,action) {// console.log(preState,'preState')let {data,type} = actionswitch(type) {case 'increment': return preState+datacase 'decrement': return preState-datadefault: return preState}
}

redux--action.js

// 就是个函数
// 同步action 返回对象，异步action 返回对象// 异步action 需要中间件 redux-thunkexport const acIncrement = data=>({type:'increment',data})
export const acDecrement = data=>({type:'decrement',data})
export const acAsyncIncrement = (data,time)=>{return (dispatch)=>{setTimeout(()=>{dispatch(acIncrement(data))},time)}
}

纯函数和高阶函数：

 redux 开发工具使用

在谷歌中导入文件夹（需要下载）

react-redux

 1. 结构：

containers--count.jsx

import React, { Component } from 'react'
import { connect } from "react-redux";
import {acDecrement,acAsyncIncrement,acIncrement} from '../../redux/count_action'class CountUI extends Component {state = {count:0}// store 里面的数据法神变化，更新页面// componentDidMount(){//   store.subscribe(()=>{//     this.setState({})//   })// }increment = ()=>{let value = this.selectRef.valuethis.props.PropIncrement(value*1)}decrement = ()=>{let value = this.selectRef.valuethis.props.PropDecrement(value*1)}handleOdd = ()=>{let value = this.selectRef.valueif(this.props.count % 2 !==0) {this.props.PropIncrement(value*1)}}handleAsync = ()=>{let value = this.selectRef.valuethis.props.PropAsyncIncrement(value*1,500)}render() {// console.log(this)return (
当前求和{this.props.count}
this.selectRef = c}>123+-奇数＋异步＋
)}
}export default connect((state)=>({count:state.reducerCount}),// api 优化{PropIncrement:acIncrement,PropDecrement:acDecrement,PropAsyncIncrement: acAsyncIncrement,}/* (dispatch)=>({PropIncrement: (data) => dispatch(acIncrement(data)),PropDecrement: (data) => dispatch(acDecrement(data)),PropAsyncIncrement: (data,time) => dispatch(acAsyncIncrement(data,time)),}) */
)(CountUI)

 ------person.jsx

import React, { Component } from 'react'
// import store from '../../redux/store'// 使用 store 里面的共享数据
import { connect } from 'react-redux'class PersonUI extends Component {render() {return (// 
PPindex{store.getState().reducerCount}
PPindex{this.props.reducerCount}
)}
}// 自动检测store 里面的数据发生变化，然后自动更新页面
export default connect((state)=>({reducerCount: state.reducerCount}),{}
)(PersonUI)

 redux---reducer.js和action.js  （不变）

// 就是一个函数
// 接收两个参数： preState 和 actionlet initCount = 5
export default function countReducer(preState=initCount,action) {// console.log(preState,'preState')let {data,type} = actionswitch(type) {case 'increment': return preState+datacase 'decrement': return preState-datadefault: return preState}
}//action
// 就是个函数
// 同步action 返回对象，异步action 返回对象// 异步action 需要中间件 redux-thunkexport const acIncrement = data=>({type:'increment',data})
export const acDecrement = data=>({type:'decrement',data})
export const acAsyncIncrement = (data,time)=>{return (dispatch)=>{setTimeout(()=>{dispatch(acIncrement(data))},time)}
}

------store.js

import {legacy_createStore as createStore,applyMiddleware, combineReducers} from 'redux'
// 创建store需要引入为redux服务的reducer
import reducerCount from './count_reducer'// 引入 异步action 需要的中间件 thunk ,通过applyMiddleware使用此中间件
import thunk from 'redux-thunk'//合并reudcer 需要 combineReducers
//汇总最好直接写在 reducer 文件夹里面的index.js中
const allReducer = combineReducers({reducerCount: reducerCount,
})
//暴露store
export default createStore(allReducer,applyMiddleware(thunk))

App.jsx

import React, { Component } from 'react'
import Count from './containers/count'
import Person from './containers/person'export default class App extends Component {render() {return (
)}
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from './App'
import store from './redux/store'
import {Provider} from 'react-redux'ReactDOM.render(,document.getElementById('root')
) // 用react-redux 不用再手动检测
// store.subscribe(()=>{
//   ReactDOM.render(,document.getElementById('root')) 
// })