Redux相关

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的步骤(过程有点繁琐,别遗漏了任何的⼀步)
  1. 从redux引⼊createStore⽤来创建数据仓库store
    createStore是⼀个函数,需要传⼊reducer作为参数,返回值是我们需要的store
  2. 在使⽤⻚⾯引⼊数据仓库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 (
            

尝试使⽤redux编写⼀个累加器

{/* 通过getState⽅法获取数据仓库⾥⾯的状 态数据state */} {store.getState()}
) } }
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(
    , 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 (
            

尝试使⽤redux编写⼀个累加器

{this.props.count}
) } } 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(
    
        
    ,
    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 (
            

尝试使⽤redux编写⼀个累加器

{this.props.count}
) } } 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(
    
        
    ,
    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 (
            

尝试使⽤redux编写⼀个累加器

{this.props.count}
) } } export default FirstRedux

你可能感兴趣的:(Redux相关)