Redux工程化应用：在react中使用redux

​ 一、准备工作：

​ 1、创建redux01工程目录；

​ 2、创建清单文件 npm init -y

​ 3、安装第三方依赖包 npm install react react-dom react-scrtipts redux --save

​ 4、创建public文件夹 — index.html

​ 5、创建src文件夹，在该文件夹下创建

​ （1）redux文件夹，用于存放redux相关文件（person_action.js、person_reducer.js、test_action、test_reducer、store.js）；

​ （2）创建App.css，用于编写APp页面样式；

​ （3）创建App.js，作为外层组件；

​ （4）创建index.js入口文件；

​ （5）创建components文件夹，用于存放子组件(Person.jsx、Test.jsx)

​ 6、src目录：

​ 二、编写代码：

​ 1、index.html：

    <div id="root"></div>

​ 2、index.js：

import ReactDOM from 'react-dom/client'
import App from './App'
import store from './redux/store'
const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
    <App/>
)
// 订阅时 重新渲染页面（目的是为了改变数据）
store.subscribe(() => {
    root.render(
        <App/>
    ) 
})

​ 3、App.js：

import React, { Component } from 'react'
import Person from './components/Person'
import Test from './components/Test'
import './App.css'

export default class App extends Component {
  render() {
    return (
      <div className='app'>
        <Person/>
        <hr/>
        <Test/>
      </div>
    )
  }
}

​ 4、App.css：

.app {
    
     
    margin: 0 auto;
    padding: 10px 15px;
    width: 400px;
    height: 400px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

​ 5、Person.jsx：

import React, { Component } from 'react'
import store from "../redux/store.js"
import { updateName, updateArms } from "../redux/person_action";

export default class Person extends Component {
  // 姓名的处理函数 把值传给action
  upName = (e) => {
    let name = e.target.value
    // console.log(name);
    store.dispatch(updateName(name))
  }

  // 兵器的处理函数
  upArms = (e) => {
    let arms = e.target.value
    // console.log(arms);
    store.dispatch(updateArms(arms))
  }
  render() {
    // console.log(store.getState());
    let { personReducer, testReducer } = store.getState()
    return (
      <div>
        <h3>Person组件</h3>
        姓名：
        <select onChange={e => this.upName(e)}>
          <option value="张飞">张飞</option>
          <option value="关羽">关羽</option>
          <option value="刘备">刘备</option>
          <option value="曹操">曹操</option>
          <option value="周瑜">周瑜</option>
        </select>
        <br />
        兵器：
        <select onChange={e => this.upArms(e)}>
          <option value="丈八蛇矛">丈八蛇矛</option>
          <option value="青龙偃月刀">青龙偃月刀</option>
          <option value="双股剑">双股剑</option>
          <option value="长弓">长弓</option>
          <option value="双截棍">双截棍</option>
        </select>
        <p>{personReducer.name} - {personReducer.arms}</p>
        <p>出自：{testReducer}</p>
      </div>
    )
  }
}

​ 6、Test.jsx：

import React, { Component } from 'react'
import store from '../redux/store'
import { setBook } from '../redux/test_action'


export default class Test extends Component {

  setName = e => {
    console.log(e.target.value);
    store.dispatch(setBook(e.target.value))
  }

  render() {
    let { personReducer, testReducer } = store.getState()
    return (
      <div>
        名著：
        <select onChange={this.setName}>
          <option value="三国演义">三国演义</option>
          <option value="水浒传">水浒传</option>
          <option value="红楼梦">红楼梦</option>
          <option value="西游记">西游记</option>
        </select>
        <br />
        <p>{testReducer}</p>
        <p>{personReducer.name} - {personReducer.arms}</p>
      </div>
    )
  }
}

​ 7、person_action.js：

import { UPNAME, UPARMS } from "./constants"

// 生产action
const updateName = (data) => {
    return {
        type:UPNAME,
        data
    }
}

const updateArms = (data) => {
    return {
        type:UPARMS,
        data
    }
}

export{
    updateArms,
    updateName
}

​ 8、person_reducer.js：

import { UPNAME, UPARMS } from './constants'  //导入常量

export default (state={name:'张飞',arms:'丈八蛇矛'},action) => {
    let {type,data} =action
    switch (type){ 
        case UPNAME:
            return {
                ...state,
                name: data
            }
        case UPARMS:
            return{
                ...state,
                arms: data
            }
        default:
            return state
    }
}

​ 9、test_action.js：

import {BOOK} from './constants'  //导入常量

const setBook = data => {
    return {
        type: BOOK,
        data
    }
}

export {
    setBook
}

​ 10、test_reducer.js：

import { BOOK } from "./constants"

export default  (state='三国演义',action) => {
    let {type,data} = action
    switch (type) {
        case BOOK:
            return data
        default:
            return state
    }
}

​ 11、constans.js：

// 该文件用于存放常量  方便以后管理
const UPNAME = 'UPNAME'
const UPARMS = 'UPARMS'
const BOOK = 'BOOK'

export {
    UPNAME,
    UPARMS,
    BOOK
}

​ 12、store.js：

import { createStore, combineReducers} from "redux";
import personReducer from './person_reducer'
import testReducer from "./test_reducer";

const rootReducer = combineReducers({personReducer,testReducer})

export default createStore(rootReducer)

​ 13、运行结果：

​ 当点击Person组件中的列表时，Person和Test组件中相应的数据都会随之改变；

​ 同理，点击Test组件中的列表时，Person和Test组件中相应的数据也会随之改变；