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

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文件夹，在该文件夹下创建redux文件夹，用于存放redux相关文件（action.js、reducer.js、store.js）；创建App.css，用于编写APp页面样式；创建App.js，作为外层组件；创建index.js入口文件；创建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 { updateName, updateArms } from '../redux/action'
import store from '../redux/store'


export default class Person extends Component {
  state = {
    name: ['张飞', '关羽', '诸葛亮', '刘备', '黄忠'],
    arms: ['丈八蛇矛', '青龙偃月刀', '诸葛连弩', '双股剑', '长弓'],
  }
  upName = (event) => {
    console.log(event);
    let name = event.target.value;
    // console.log(name);
    store.dispatch(updateName(name)) //dispatch会自动调用reducer
  }

  upArms = (event) => {
    let arms = event.target.value
    // console.log(arms);
    store.dispatch(updateArms(arms)) //dispatch会自动调用reducer
  }

  render() {
    return (
      <div>
        <h3>Person组件</h3>
        姓名：
        <select onChange={e => this.upName(e)}>
          {
            this.state.name.map((item, index) =>
              <option key={index}>{item}</option>
            )
          }
        </select>
        <br />
        兵器：
        <select onChange={e => this.upArms(e)}>
          {
            this.state.arms.map((item, index) =>
              <option key={index}>{item}</option>
            )
          }
        </select>


        <p>{store.getState().name} - {store.getState().arms}</p>

      </div>
    )
  }
}

​ 6、Test.jsx：

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

export default class Test extends Component {
  render() {
    return (
      <div>
        <h3>Test组件</h3>
        <p>{store.getState().name}</p>
        <p>{store.getState().arms}</p>
      </div>
    )
  }
}

​ 7、action.js：

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

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

export {
    updateName,
    updateArms
}

​ 8、reducer.js：

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

​ 9、store.js：

import {createStore} from 'redux'
import heroReducer from './reducer'


export default createStore(heroReducer)