Redux相关

作者: 强某某 | 来源:发表于2019-08-28 18:38 被阅读0次

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中间件给我们带来的帮助

由于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-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

Redux相关

Redux

Redux实现累加器

代码

基于React-redux改造

装饰器简化代码

深度剖析redux中间件给我们带来的帮助

reduce和action进行统一管理

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读