这是我参与「第四届青训营」笔记创作活动的的第13天

为什么要用Redux

Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。

Redux 在以下情况下最有用：

App的许多地方都需要大量使用状态
状态更新十分频繁
更新状态的逻辑可能很复杂
App具有中型或大型代码库，并且可能由许多人开发
需要查看该状态如何随着时间的推移而更新

Redux官网给的建议是：如无必要，不建议使用Redux

Redux工作原理

在Redux中，所有的数据（比如state）被保存在一个被称为store的容器中 → 在一个应用程序中只能有一个。store本质上是一个状态树，保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。要通过本地或远程组件更改状态，需要分发一个action。分发在这里意味着将可执行信息发送到store。当一个store接收到一个action，它将把这个action代理给相关的reducer。reducer是一个纯函数，它可以查看之前的状态，执行一个action并且返回一个新的状态。

简单demo

先编写按钮组件ComA：

import React from "react"

import { connect } from "react-redux"

class ComA extends React.Component {
  render () {
    return (
      <button onClick={this.handleClick}>+</button>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    sendAction: () => {
      dispatch({
        type: "send_action"
      })
    }
  }
}

export default connect(null, mapDispatchToProps)(ComA)

再编写ComB，用于显示数据：

import { render } from "@testing-library/react"
import React from "react"

export default class ComB extends React.Component {
  render () {
    return <div>1</div>
  }
}

然后编写action：

const sendAction = () => {
  return {
    type: "send_type",
    value: "我是一个action"
  }
}

module.exports = {
  sendAction
}

编写reducer：

exports.reducer = (state, action) => {
  return state
}

编写store：

import { createStore } from "redux"
import { reducer } from "../reducer"
export default createStore(reducer)

最后编写App

import React from "react"
import store from "./store"
import { Provider } from "react-redux"
import ComA from "./pages/ComA"
import ComB from "./pages/ComB"

function App () {
  return (
    <Provider store={store}>
      <div className="App">
        <ComA></ComA>
        <ComB></ComB>
      </div>
    </Provider>
  )
}

export default App

运行yarn start，点击按钮，可以看到效果

总结

Redux让我们能够集中统一地管理状态，但是具有一定的上手难度。建议个人项目可以使用mobx替代。如无必要，不要强行上Redux。

Redux入门简介

为什么要用Redux

Redux工作原理

简单demo

总结