Redux
-
actions
- actions其实是描述操作的对象，我们调⽤dispatch时需要传⼊此对象
-
store
- store是整个应⽤的数据存储仓库，把我们全局管理的状态数据存储起来
- 它就是我们的后勤保障，是我们打仗的政委，专⻔管理后勤数据
-
reducers
- reducers接收action并更新store
-
注意：redux是⼀个单独的数据流框架，跟react并没有直接的联系，我们也可以在JQ在其他的复杂项⽬⾥使⽤redux进⾏数据管理，当我们不知道是否应该是⽤redux的时候，我们都是不需要的，因为只有我们很肯定redux能帮助我们管理好复杂项⽬数据流的时候他才能发挥它的威⼒，简单的项⽬我们只需要state+props+context就够了
1.png
Redux实现累加器
- 安装redux npm install redux --save
- 编写使⽤redux的步骤(过程有点繁琐，别遗漏了任何的⼀步)
- 从redux引⼊createStore⽤来创建数据仓库store
createStore是⼀个函数，需要传⼊reducer作为参数，返回值是我们需要的store - 在使⽤⻚⾯引⼊数据仓库store，
- 通过getState()⽅法可以获取到数据仓库⾥的状态数据state
- 通过dispatch(action)可以触发更改reducer函数
- 每次触发dispatch都会触发store.subscribe()⽅法，⽤来从新触发⻚⾯渲染
代码
store.js
import { createStore } from 'redux'
const fitstReducer = (state=0,action ) => {
switch(action.type){
//当传⼊action的type为add的时候给state+1
case 'add' :
return state+1;
//当传⼊action的type为reduce的时候给state-1
case 'reduce' :
return state-1;
//当传⼊的都不是以上的类型是返回旧的state
default:
return state;
}
}
//创建数据仓库，把我们编写的reducer作为参数传⼊createStore
const store=createStore(fitstReducer)
export default store
FirstRedux.js
import React, { Component } from 'react'
import store from './store'
export default class FirstRedux extends Component {
render() {
return (
<div>
<h1>尝试使⽤redux编写⼀个累加器</h1>
{/* 通过getState⽅法获取数据仓库⾥⾯的状
态数据state */}
{store.getState()}
<div>
<button onClick=
{() => store.dispatch({ type: 'add' })}>加⼀</button>
<button onClick=
{() => store.dispatch({ type: 'reduce' })}>减⼀</button>
</div>
</div>
)
}
}
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import FirstRedux from './TryRedux/FirstRedux'
import store from './TryRedux/store'
const render = () => {
ReactDOM.render(<FirstRedux >
</FirstRedux>, document.getElementById('root'))
}
render()
store.subscribe(render)
基于React-redux改造
由于redux的写法太繁琐，还每次都需要重新调⽤render，其实性能较低，而且数据还是在state里面，很容易全局污染，而React-redux是提升到最父级的props，避免了污染同时内部做了性能处理
安装react-redux： npm install react�redux --save
-
React-redux提供了两个api供我们使⽤
- Provider 顶级组件，功能为给我们提供数据
- connect ⾼阶组件，功能为提供数据和⽅法
- 以下为使⽤react-redux改造累加器的代码 只需留意index.js和FirstRedux.js，store.js暂时不⽤作改变
FirstRedux.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
//写⼀个返回数据的⽅法，供connect使⽤，connect会帮我们把数据转换成props
const mapStateToProps = (state) => {
return {
count: state
}
}
//写⼀个返回dispatch⽅法的⽅法供connect使⽤，connect帮我们
把dispatch转换成props
const mapDispatchToProps = dispatch => {
return {
add: () => dispatch({ type: 'add' }),
reduce: () => dispatch({ type: 'reduce' })
}
}
class FirstRedux extends Component {
render() {
return (
<div>
<h1>尝试使⽤redux编写⼀个累加器</h1>
{this.props.count}
<div>
<button onClick=
{() => this.props.add()}>加⼀</button>
<button onClick=
{() => this.props.reduce()}>减⼀</button>
</div>
</div>
)
}
}
export default
connect(mapStateToProps, mapDispatchToProps)
(FirstRedux)
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import FirstRedux from './TryRedux/FirstRedux'
import store from './TryRedux/store'
import { Provider } from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<FirstRedux ></FirstRedux>
</Provider>,
document.getElementById('root'))
装饰器简化代码
- connect⾼阶组件⽤装饰器会使我们的代码看起来更简洁易懂
FirstRedux.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
@connect(
state => ({ count: state }),
dispatch => ({
add: () => dispatch({ type: 'add' }),
reduce: () => dispatch({ type: 'reduce' })
})
)
class FirstRedux extends Component {
render() {
return (
<div>
<h1>尝试使⽤redux编写⼀个累加器</h1>
{this.props.count}
<div>
<button onClick=
{() => this.props.add()}>加⼀</button>
<button onClick=
{() => this.props.reduce()}>减⼀</button>
</div>
</div>
)
}
}
export default FirstRedux
可以很明显的发现，使用了react-redux之后，代码相比redux反而增多，那么react-redux的优势在哪里呢？
深度剖析redux中间件给我们带来的帮助
由于redux reducer默认只⽀持同步，实现异步任务或者延时任务时，我们就要借助中间件的⽀持了
-
没使⽤中间件时的redux数据流
2.png -
使⽤了中间件middleware之后的redux数据流
3.png
- 新学习两个中间件
- redux-thunk⽀持我们reducer在异步操作结束后⾃动执⾏
- 安装 redux-thunk npm install redux-thunk --save
- redux-logger 打印⽇志记录协助本地调试
- 安装redux-logger npm install redux-logger --save
- redux-thunk⽀持我们reducer在异步操作结束后⾃动执⾏
redux-logger不需要console.log这种类似的编码操作，在触发redux操作时候自动打印
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
const fitstReducer = (state = 0, action) => {
console.log(action)
switch (action.type) {
//当传⼊action的type为add的时候给state+1
case 'add':
return state + 1;
//当传⼊action的type为reduce的时候给state-1
case 'reduce':
return state - 1;
//当传⼊的都不是以上的类型是返回旧的state
default:
return state;
}
}
//创建数据仓库，把我们编写的reducer作为参数传⼊createStore
//有⼀个注意点就是logger最好放在最后，⽇志最后输出才不会出bug，因为中间件时按顺序执⾏
const
store = createStore(fitstReducer, applyMiddleware(thunk
, logger))
export default store
reduce和action进行统一管理
这才是最终项目经常使用的形式
count.redux.js
//把reducer和action抽离出来再同⼀个⽂件下进⾏维护
const fitstReducer = (state = 0, action) => {
console.log(action)
switch (action.type) {
//当传⼊action的type为add的时候给state+1
case 'add':
return state + 1;
//当传⼊action的type为reduce的时候给state-1
case 'reduce':
return state - 1;
//当传⼊的都不是以上的类型是返回旧的state
default:
return state;
}
}
const add = () => ({ type: 'add' })
const reduce = () => ({ type: 'reduce' })
const asyncAdd = () => dispatch => {
setTimeout(() => {
dispatch({ type: 'add' })
}, 1000)
}
export { fitstReducer, add, reduce, asyncAdd }
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import FirstRedux from './TryRedux/FirstRedux'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import { fitstReducer } from './TryRedux/count.redux'
const
store = createStore(fitstReducer, applyMiddleware(thunk
, logger))
ReactDOM.render(
<Provider store={store}>
<FirstRedux ></FirstRedux>
</Provider>,
document.getElementById('root'))
FirstRedux.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { add, reduce, asyncAdd } from './count.redux'
@connect(
state => ({ count: state }),
{ add, reduce, asyncAdd }
)
class FirstRedux extends Component {
render() {
return (
<div>
<h1>尝试使⽤redux编写⼀个累加器</h1>
{this.props.count}
<div>
<button onClick=
{() => this.props.add()}>加⼀</button>
<button onClick=
{() => this.props.reduce()}>减⼀</button>
<button onClick=
{() => this.props.asyncAdd()}>延时加1</button>
</div>
</div>
)
}
}
export default FirstRedux
