您现在的位置是：首页 > 工具

当前栏目

react-redux、Provider、整合容器组件与UI组件、多组件数据共享

组件容器 UI React 整合 redux Provider 数据共享

2023-09-11 14:19:39 时间

react-redux：

facebook团队发现程序员都喜欢用redux在react项目中管理自己的状态，于是就开发了react-redux，目的是让程序员更方便的在react中使用redux。

ui组件一般放在components文件夹下，容器组件放在container文件夹下

ui组件的容器组件不用自己去写，用react-redux去写。

安装react-redux

npm install react-redux

react-redux的注意事项：

1、每个ui组件都有一个容器组件，是福字关系

2、容器组件用来和redux打交道

3.ui组件不能有任何redux的api

4、容器组件会传给ui组件：a、redux保存的状态，b、用于操作状态的方法

5、容器传给ui组件的状态和操作状态的方法均通过props

用react-redux实现一下Count组件

一、在containers文件下创建对应的Count容器组件

containers/Count/index.jsx

// 引入Count的ui组件
import CountUI from '../../components/Count'
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/count_action'
// 引入connect，用于连接UI组件与redux
import { connect } from 'react-redux'
/**
 * 1.mapStateToProps函数返回的是一个对象：
 * 2.返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3.mapStateToProps用于传递状态
 */
function mapStateToProps(state) {
  // a函数的参数就是store中的状态
  return {count: state}
}
// 函数返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value---操作状态的方法
/**
 * 1.mapDispatchToProps函数返回的是一个对象：
 * 2.返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3.mapDispatchToProps用于传递操作状态的方法
 */
function mapDispatchToProps(dispatch) {
  return {
    jia: number => dispatch(createIncrementAction(number)),
    jian: number => dispatch(createDecrementAction(number)),
    jiaAsync: number => dispatch(createIncrementAsyncAction(number, 500)),
  }
}
// 使用connect()()创建并暴露出去一个容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);

二、Count的ui组件

components/Count/index.jsx

import React, { Component } from 'react'

export default class Count extends Component {

  // 加法
  increment = () => {
    const { value } = this.selectNumber;
    this.props.jia(value*1);
  }

  // 减法
  decrement = () => {
    const { value } = this.selectNumber;
    this.props.jian(value*1);
  }

  // 如果是奇数再加
  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    if(this.props.count % 2 !== 0) {
      this.props.jia(value*1);
    }
  }

  // 异步加
  incrementAsync = () => {
    const { value } = this.selectNumber;
    this.props.jiaAsync(value*1)
  }

  render() {
    console.log(this.props);
    return (
      <div>
        <h1>当前求和为: {this.props.count}</h1>
        <select ref={ c => this.selectNumber = 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.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

三、容器组件的store由其父级通过props传入

这里的Count容器组件是app.jsx

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

export default class app extends Component {
  render() {
    return (
      <div>
        <Count store={store} />
      </div>
    )
  }
}

容器组件内的优化：

1、代码层面优化：把function写成箭头函数，直接传递到第一个参数（mapStateToProps）

2、react-redux的api层面优化：mapDispatchToProps可以写成对象形式，只需要把actiom_creator传递过去，react-redux会自动调用dispatch分发

containers/Count/index.jsx:

// 引入Count的ui组件
import CountUI from '../../components/Count'
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/count_action'
// 引入connect，用于连接UI组件与redux
import { connect } from 'react-redux'

// 使用connect()()创建并暴露出去一个容器组件
export default connect(
  state  => ({count: state}),
  // mapDispatchToProps的一般写法
  // dispatch => ({
  //   jia: number => dispatch(createIncrementAction(number)),
  //   jian: number => dispatch(createDecrementAction(number)),
  //   jiaAsync: number => dispatch(createIncrementAsyncAction(number, 500)),
  // })
  // mapDispatchToProps的简写
  // 简写形式可以写成对象形式
  // 把对应的action_creator传递过期就可以了
  {
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction,
  }
)(CountUI);

Provider：

之前，在index.jsx内，我们为了监听store的变化触发组件render，写了这样一段代码：

// 监听store中值的变化，更新App组件，就不用在每个组件中监听store掉用render了
store.subscribe(() => {
  root.render(<App />);
})

在容器组件内，为了把store传给容器组件，我们通过props的形式把store传了过去，如果项目中有很多的容器组件，每个都有传store，有些不方便，

react-redux的Provider可以优雅的把这两个问题解决，Provider会自动分析项目中的容器组件，把需要store的容器组件传递给每一个容器组件。

在入口文件index.jsx内这样写：

import React from 'react'
import ReactDOM from 'react-dom/client';
import App from './App.jsx'
import store from './redux/store'
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);
// // 监听store中值的变化，更新App组件，就不用在每个组件中监听store掉用render了
// store.subscribe(() => {
//   root.render(<App />);
// })

在使用Count容器组件的地方就可以省去传store的代码：

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

export default class app extends Component {
  render() {
    return (
      <div>
        {/* <Count store={store} /> */}
        <Count />
      </div>
    )
  }
}

整合容器组件与ui组件：

上面的例子，我们写了一个Count组件，分别在components中写了一个Count的UI组件，在Container中写了对应的容器组件。

如果项目中有20个组件需要和redux打交道，因为每个UI组件都需要一个容器组件，那么我们就需要再写对应的20个容器组件，总共40个组件，这样就很不方便了，

我们完全可以在一个文件内写两个组件，一个是ui组件，一个是容器组件，最后把容器组件暴露出来：

原来的Count的UI组件：

import React, { Component } from 'react'

export default class Count extends Component {

  // 加法
  increment = () => {
    const { value } = this.selectNumber;
    this.props.jia(value*1);
  }

  // 减法
  decrement = () => {
    const { value } = this.selectNumber;
    this.props.jian(value*1);
  }

  // 如果是奇数再加
  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    if(this.props.count % 2 !== 0) {
      this.props.jia(value*1);
    }
  }

  // 异步加
  incrementAsync = () => {
    const { value } = this.selectNumber;
    this.props.jiaAsync(value*1)
  }

  render() {
    console.log(this.props);
    return (
      <div>
        <h1>当前求和为: {this.props.count}</h1>
        <select ref={ c => this.selectNumber = 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.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

原来的Count的容器组件：

// 引入Count的ui组件
import CountUI from '../../components/Count'
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/count_action'
// 引入connect，用于连接UI组件与redux
import { connect } from 'react-redux'

// 使用connect()()创建并暴露出去一个容器组件
export default connect(
  state  => ({count: state}),
  // mapDispatchToProps的一般写法
  // dispatch => ({
  //   jia: number => dispatch(createIncrementAction(number)),
  //   jian: number => dispatch(createDecrementAction(number)),
  //   jiaAsync: number => dispatch(createIncrementAsyncAction(number, 500)),
  // })
  // mapDispatchToProps的简写
  // 简写形式可以写成对象形式
  // 把对应的action_creator传递过期就可以了
  {
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction,
  }
)(CountUI);

我们把上面的容器组件和UI组件整合到容器组件内，最后暴露出容器组件：

Containers/Count/index.jsx:

import React, { Component } from 'react'
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/count_action'
// 引入connect，用于连接UI组件与redux
import { connect } from 'react-redux'

// UI组件
class Count extends Component {

  // 加法
  increment = () => {
    const { value } = this.selectNumber;
    this.props.jia(value*1);
  }

  // 减法
  decrement = () => {
    const { value } = this.selectNumber;
    this.props.jian(value*1);
  }

  // 如果是奇数再加
  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    if(this.props.count % 2 !== 0) {
      this.props.jia(value*1);
    }
  }

  // 异步加
  incrementAsync = () => {
    const { value } = this.selectNumber;
    this.props.jiaAsync(value*1)
  }

  render() {
    console.log(this.props);
    return (
      <div>
        <h1>当前求和为: {this.props.count}</h1>
        <select ref={ c => this.selectNumber = 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.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}


// 容器组件
export default connect(
  // mapStateToProps
  state  => ({count: state}),
  // mapDispatchToProps的一般写法
  // dispatch => ({
  //   jia: number => dispatch(createIncrementAction(number)),
  //   jian: number => dispatch(createDecrementAction(number)),
  //   jiaAsync: number => dispatch(createIncrementAsyncAction(number, 500)),
  // })
  // mapDispatchToProps的简写
  {
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction,
  }
)(Count);

从0开始写一个极简版的Count组件：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createIncrementAction } from '../../redux/count_action'

class Count extends Component {
  add = () => {
    this.props.jiafa(1)
  }

  render() {
    return (
      <div>
        <h2>当前求和为: {this.props.he}</h2>
        <button onClick={this.add}>点我加1</button>
      </div>
    )
  }
}

export default connect(
  // 映射状态
  state => ({ he: state }),
  // 映射操作状态的方法
  {
    jiafa: createIncrementAction
  }
)(Count)

多组件数据共享：

前面的例子我们把count_actios.js和count_reducer.js直接放在了redux目录下，这样下去，多个组件就产生很多的xxx_action.js和xxx_reducer.js，索性，在redux目录下创建两个文件夹：

actions和reducers分别用来放置各个组件的action和reducer文件。

我们再创建一个Person组件，让count钻进可以用person的数据，让person组件可以用count的数据，实现数据共享。

把redux文件夹：

在这里需要注意，之前redux中只维护了count组件的一个值，但是现在又要维护person组件的值，这里就需要借助react-redux中的一个函数 combineReducers，把所有需要维护的reducer组合到一起，传给store。

store.js:

/**
 * 该文件专门用于暴露一个store对象
 */
// 引入createStore，专门创建redux中最为核心的store对象
import { createStore, applyMiddleware, combineReducers } from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './reducers/count'
// 引入为Count组件服务的reducer
import personReducer from './reducers/person'
// 引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
// 汇总所有的reducer变为一个总的reducer
const allReducer = combineReducers({
  he: countReducer,
  rens: personReducer
})
// 暴露store
export default createStore(allReducer, applyMiddleware(thunk));

person组件要增加人，那么reducer中就要多一个增加人的动作类型

redux/constants.js:

/**
 * 改文件是专门定义action中type类型的常量值
 */
export const INCREMENT = 'increment';
export const DECREMENT = 'decrement';
export const ADD_PERSON = 'add_person';

redux/reducers/count.js

/**
 * 1.该文件是创建一个专门为Count组件服务的reducer,reducer的本质就是一个函数
 * 2.reducer函数会接到两个参数，分别是：之前的状态(preState)、动作对象(action)
 */
 import { INCREMENT, DECREMENT } from '../constants'
 // preState初始值是 undefined, 此时我们给他一个初始值
 const initState = 0;
 export default function countReducer(preState = initState, action) {
   // 从action对象中获取 type、data
   const { type, data } = action;
   switch(type) {
     case INCREMENT:  // 如果加
       return preState + data;
     case DECREMENT: // 如果减
       return preState - data;
     default:
       return preState;
   }
 }

redux/reducers/person.js

import { ADD_PERSON } from '../constants'
// 初始化人的列表
const initState = [{ id: '001', name: 'tom', age: 18 }];

export default function personReducer(preState = initState, action) {
  const { type, data } = action;
  switch(type) {
    case ADD_PERSON: // 添加一个人
      return [data, ...preState]
    default: 
      return preState;
  }
}

redux/actions/count.js

/**
 * 改文件专门为Count组件生产action对象
 */
 import { INCREMENT, DECREMENT } from '../constants'

 // 同步action，就是指action的值为Object类型的一般对象
 export const createIncrementAction = data => ({ type: INCREMENT, data });
 export const createDecrementAction = data => ({ type: DECREMENT, data });
 // 异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的（组件中的异步函数可以异步调用同步action）
 export const createIncrementAsyncAction = (data, time) => {
   return (dispatch) => {
     setTimeout(() => {
       dispatch(createIncrementAction(data));
     },time)
   }
 }

redux/actions/person.js

import { ADD_PERSON } from '../constants'

// 创建增加一个人的action对象
export const createAddPersonAction = personObj => ({ type: ADD_PERSON, data: personObj });

以上准备好了redux，下面写Person组件

containers/Person/index.jsx

import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { createAddPersonAction } 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.jiayiren(personObj);
    this.nameNode.value = '';
    this.ageNode.value = '';
  }
  render() {
    return (
      <div>
        <h2>我是Person组件，上方组件求和为: {this.props.he}</h2>
        <input ref={c => this.nameNode = c } type="text" placeholder="输入名字" />
        <input ref={c => this.ageNode = c } type="text" placeholder="输入年龄" />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.yiduiyren.map(p => {
              return <li key={p.id}>名字{p.name}--年龄{p.age}</li>
            })
          }
          
        </ul>
      </div>
    )
  }
}

export default connect(
  // mapStateToProps 映射状态
  state => ({
    yiduiyren: state.rens,
    he: state.he
  }),
  // mapDisPatchToProps 映射操作状态的方法
  {
    jiayiren: createAddPersonAction
  }
)(Person)

containers/Count/index.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/actions/count'

class Count extends Component {

  // 加法
  increment = () => {
    const { value } = this.selectNumber;
    this.props.jia(value*1);
  }

  // 减法
  decrement = () => {
    const { value } = this.selectNumber;
    this.props.jian(value*1);
  }

  // 如果是奇数再加
  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    if(this.props.count % 2 !== 0) {
      this.props.jia(value*1);
    }
  }

  // 异步加
  incrementAsync = () => {
    const { value } = this.selectNumber;
    this.props.jiaAsync(value*1)
  }

  render() {
    console.log(this.props);
    return (
      <div>
        <h1>当前求和为: {this.props.count}, 下方组件总人数为：{this.props.renshu}</h1>
        <select ref={ c => this.selectNumber = 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.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

export default connect(
  // 映射状态
  state => ({
    count: state.he,
    renshu: state.rens.length
  }),
  // 映射操作状态的方法
  {
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction,
  }
)(Count)

app.jsx

import React, { Component } from 'react'
import Count from './containers/Count'
import Person from './containers/Person'

export default class app extends Component {
  render() {
    return (
      <div>
        <Count />
        <hr />
        <Person /> 
      </div>
    )
  }
}

入口文件index.js

import React from 'react'
import ReactDOM from 'react-dom/client';
import App from './App.jsx'
import store from './redux/store'
import { Provider } from 'react-redux'

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

react-redux也有开发者工具，不过需要配合一个插件使用

yarn add redux-devtools-extension

在store中引入

/**
 * 该文件专门用于暴露一个store对象
 */
// 引入createStore，专门创建redux中最为核心的store对象
import { createStore, applyMiddleware, combineReducers } from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './reducers/count'
// 引入为Count组件服务的reducer
import personReducer from './reducers/person'
// 引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
// 引入redux-devtools-extension
import { composeWithDevTools } from 'redux-devtools-extension'
// 汇总所有的reducer变为一个总的reducer
const allReducer = combineReducers({
  he: countReducer,
  rens: personReducer
})
// 暴露store
// composeWithDevTools，也是在第二个参数
// export default createStore(allReducer, applyMiddleware(thunk));
export default createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)));

猜你喜欢

【转】.NET下使用HTTPClient请求的正确姿势
《设计模式之禅》--备忘录扩展：多状态的备忘录
EF框架中，在实体中手动更新字段，数据库数据未同步到程序中应该怎么解决呢？
linux shell 脚本攻略学习5---find命令详解
自动生成百度小程序sitemap.txt文件路径
信号的运算与变换
RTF 格式说明
Angular应用里的Template Reference变量
【CS Round #39 (Div. 2 only) A】Removed Pages
都说测试开发是测试人的终点，这是真的吗？
POJ3071-Football（概率DP+滚动数组）
【DT8.0】分享原创极简搜索界面
文档驱动开发模式在 AIMS 中的应用与实践
Android 12.0 启动app时设置密码锁
【NLP】使用 PyTorch 通过 Hugging Face 使用 BERT 和 Transformers 进行情感分析
redis 安装和配置
如何用js检测浏览器类型
OBS架构分析
HTML 中的meta标签中的http-equiv与name属性使用介绍

相关主题

vue组件传值
vue组件化开发
React组件复用
React 函数组件
react组件
Vue——组件
007-组件和Props
组件component
vue3新的组件
vue函数式组件
页面组件
tab组件库
vue-04-组件
组件和服务
小程序组件化

zl程序教程

当前栏目

react-redux、Provider、整合容器组件与UI组件、多组件数据共享

相关文章