React-Redux实现组件间数据共享+项目打包

Posted 2023-01-30 劳埃德·福杰

目录

上一个求和案例只用了一个组件，现在看看redux如何实现多个组件之间的数据共享。

1.步骤

①定义一个Person组件，和Count组件通过redux共享数据
②为Person组件编写：reducer、action，配置constant常量
③使用combineReducers对Count和Person的Reducer进行合并，合并后的总状态是一个对象。
④交给store的是总reducer

2.案例

/src/containers/Count/index.jsx

import connect from 'react-redux'
import React,  Component  from 'react'
// 引入action
import 
  increment,
  decrement,
  incrementAsync
 from '../../redux/actions/count'

// 定义CountUI组件
class Count extends Component 
  increment=()=>
    const value = this.selectNumer
    this.props.increment(value*1)
  
  decrement=()=>
    const value = this.selectNumer
    this.props.decrement(value*1)
  
  incrementAsync=()=>
    const value = this.selectNumer
    this.props.incrementAsync(value*1,500)
  
  render() 
    return (
      <div>
        <h1>当前求和为：this.props.count，下方组件人数：this.props.personCount</h1>
        <select ref=c => this.selectNumer = c>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick=this.increment>+</button>&nbsp;
        <button onClick=this.decrement>-</button>&nbsp;
        <button onClick=this.incrementAsync>异步加</button>&nbsp;
      </div>
    )
  

// 创建并暴露一个Count的容器组件
export default connect(
  state => (count: state.count,personCount:state.persons.length), 
  
    increment,
    decrement,
    incrementAsync
  
)(Count)

/src/containers/Person/index.jsx

import React,  Component  from 'react'
import  nanoid  from 'nanoid'
import  connect  from 'react-redux';
import  addPerson  from '../../redux/actions/person'

class Person extends Component 
  addPerson = () => 
    const name = this.nameNode.value;
    const age = this.ageNode.value;
    const personObj = id:nanoid(),name,age;
    this.props.addPerson(personObj)
  
  render() 
    return (
      <div>
        <h1>上方组件的求和为：this.props.Count</h1>
        <input ref=c=>this.nameNode = c type="text" placeholder='输入名字' />&nbsp;
        <input ref=c=>this.ageNode = c type="text" placeholder='年龄' />&nbsp;
        <button onClick=this.addPerson>添加</button>
        <ul>
          
            this.props.persons.map((p) => 
              return <li key=p.id>p.name--p.age</li>
            )
          
        </ul>
      </div>
    )
  


export default connect(
  state => (persons: state.persons,Count:state.count),
  
    addPerson
  
)(Person)

/src/redux/actions/count.js

/*
  该文件专门为Count组件生成action对象
*/
import  INCREMENT, DECREMENT  from "../constant";

// 同步action,就是指action的值为一般object类型的对象
export const increment = data => (type:INCREMENT,payload: data)
export const decrement = data => (type:DECREMENT,payload: data)

// 异步action,就是指action的值为函数
export const incrementAsync = (data, time) => 
  return (dispatch)=>
    setTimeout(()=>
      dispatch(increment(data))
    ,time)
  

/src/redux/reducers/count.js/src/redux/actions/person.js

import ADD_PERSON from '../constant'

export const addPerson = personObj => (type:ADD_PERSON,payload:personObj)

/src/redux/reducers/index.js

/*
  该文件用于汇总所有reducer为一个总的reducer
*/
import combineReducers from '@reduxjs/toolkit'
import count from './count' //引入为Count组件服务的reducer
import persons from './person' //引入为Person组件服务的reducer

export default combineReducers(
  count,
  persons
)

/src/redux/reducers/count.js

/*
  该文件是用于创建一个为Count组件服务的reducer
*/
import  INCREMENT,DECREMENT  from "../constant"

const initState = 0;
export default function countReducer(preState=initState, action) 
  const type, payload = action;
  switch(type) 
    case INCREMENT:
      return preState+payload;
    case DECREMENT:
      return preState-payload;
    default:
      return preState;
  

/src/redux/reducers/person.js

import  ADD_PERSON  from "../constant";

const initState = [id:'001',name:'tom',age:18]
export default function personReducer(preState=initState,action) 
  const type,payload = action
  switch(type) 
    case ADD_PERSON:
      return [payload,...preState]
    default:
      return preState
  

/src/redux/constant.js

/*
  该模块用于定义action对象中type类型的常量值
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const ADD_PERSON = 'add_person'

/src/redux/store.js

/*
  该文件用于暴露一个store对象
*/
import configureStore from '@reduxjs/toolkit'
import reducer from './reducers'

export default configureStore( reducer: reducer )

/src/App.jsx

import Count from "./containers/Count"; //引入Count的容器组件
import Person from "./containers/Person" //引入Person的容器组件

function App() 
  return (
    <div>
      <Count/>
      <hr />
      <Person />
    </div>
  );


export default App;

/src/index.js 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './redux/store';
import  Provider  from 'react-redux';  // provider会自动帮容器组件传store

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<Provider store=store>
		<App />
	</Provider>
);

效果

3.打包项目

全局安装serve库，并配置一下环境变量

npm i serve -g

将上面的项目打包，在项目根目录下面执行如下指令，会生成一个build文件夹

npm run build

在生产环境运行该项目，serve指令后面跟的build文件夹的路径

serve build