react之redux简化版

需求：用redux来实现获取数字加减后的值。
效果如下：

1. 需要Header和Content组件。Header组件如下

import React, { Component } from 'react'
export default class Header extends Component {
render() {
  return (
    <div>
      值：0
    </div>
  )
}
}

Conttent组件代码如下

import React, { Component } from 'react'
export default class Content extends Component {
    addNum = () => {
        let num = this.selectDom.value;
    }
    cutNum =() => {
        let num = this.selectDom.value;  
    }
  render() {
    return (
      <div>
          <select ref={c=>this.selectDom = c}>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
          </select>&nbsp;
          <button onClick={this.addNum}>+</button>&nbsp;
          <button onClick={this.cutNum}>-</button>
      </div>
    )
  }
}

2. 在app.js 中引用这2个组件

import React, { Component } from 'react'
import Header from './components/Header/Header'
import Content from './components/Content/Content'
export default class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <hr/>
        <Content/>
      </div>
    )
  }
}

3.安装redux 我这里使用yarn 安装依赖

yarn add redux

4.在src文件下创建redux文件夹及该文件夹下创建store.js 及 count_reducer.js 两个文件
5.在store.js添加代码

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

6.在count_reducer.js下添加代码

function countReducer(preState=0,action){
    let {type,data} = action;
    switch (type) {
        case "add": //如果是添加
            return preState + data 
        case "cut"://如果是减少
                return preState - data
        default: //初始化
            return preState
    }
}
export default countReducer;

7.修改Content组件（引入store，并在添加和减少的方法中向redux传入要变动的数据）使用redux Api : store.dispatch({})

import React, { Component } from 'react'
import store from '../../redux/store'
export default class Content extends Component {
    addNum = () => {
        let num = this.selectDom.value;
        store.dispatch({type:"add",data:num*1})
    }
    cutNum =() => {
        let num = this.selectDom.value;
        store.dispatch({type:"cut",data:num*1})
    }
  render() {
    return (
      <div>
          <select ref={c=>this.selectDom = c}>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
          </select>&nbsp;
          <button onClick={this.addNum}>+</button>&nbsp;
          <button onClick={this.cutNum}>-</button>
      </div>
    )
  }
}

8.在Header组件中接收store的值,使用redux Api : store.getState()

import React, { Component } from 'react'
import store from '../../redux/store'
export default class Header extends Component {
  render() {
    return (
      <div>
        值：{store.getState()}
      </div>
    )
  }
}

9.注意：redux 在修改数据后，组件不会自动render，所以我们需要在监听store数据变化后，重新render一次组件，由于react的diff原理，我们可以直接在index.js中添加 store.subscribe 方法来监听store的值是否改变

import ReactDOM from 'react-dom/client';
import App from './App';
import store from './redux/store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
store.subscribe(()=>{
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
})

这样，我们就完成了一个使用redux来让不同组件传递值的简单案例。