【React】React-Redux


1. React-Redux概述

  • React-Redux 是 Redux 的官方 React 绑定库。
  • React-Redux 能够使React组件从Redux store中读取数据,并且向 store 分发 actions 以更新数据。
  • React-Redux 并不是 Redux 内置,需要单独安装。
  • React-Redux 一般会和 Redux 结合一起使用。

安装redux、react-redux:

  • npm install redux;
  • npm install react-redux;

2. Provider

  • 是react-redux提供的一个React组件。
  • 作用是把state传给它的所有子组件。
  • 也就说当你使用Provider传入数据后,下面的所有子组件都可以共享数据,很方便。

使用方法: 用Provider组件包裹在最外层的组件

<Provider  store={
    store }>
	<App />
</Provider>

注意:一定是在Provider中传store


3. connect

是一个高阶组件(高阶组件:传入一个组件,它会返回新的加工后的组件)。

connect有四个参数([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])后面两个参数可以不写,不写的话它是有默认值的。
主要关注前两个参数: mapStateToProps和 mapDispatchToProps。

  • mapStateToProps:如果定义该参数,组件会监听rRedux store的变化。任何时候,
    只要 Redux store 发生改变,mapStateToProps 函数就会被调用。
  • mapDispatchToProps:如果传递的是一个对象,那么每个定义在该对象的函数都将被当作 Redux action creator,对象所定义的方法名将作为属性名;
    每个方法将返回一个新的函数,函数中dispatch方法会将 actioncreator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。

使用方法:把指定的state和指定的action与React组件连接起来,后面括号里面写UI组件名

 connect(mapStateToProps,mapDispatchToProps)(TbItem)

4. 示例

4.1 利用react-redux实现计数器

  1. 目录结构
    在这里插入图片描述

  2. store.js

import {
   createStore} from 'redux';
export const ADD = 'ADD';
export const MINUS = 'MINUS';

function reducer(state = {
    count:0},action){
   
    console.log('Action:',action);
    switch (action.type) {
   
        case ADD:
            return {
    count: state.count + 1}
        case MINUS:
            return {
    count: state.count - 1}
        default:
            return state
    }
}

let store = createStore(reducer);
export default store;
  1. action.js
function add(){
   
    return {
   
        type: 'ADD',
    }
}

function minus(){
   
    return {
   
        type: 'MINUS'
    }
}

const action = {
   add,minus};

export default action;
  1. Counter1.js
import {
   connect} from 'react-redux';
import action from '../actions/action';

function Counter1(props){
   
    return(
        <>
            <p>{
   props.count}</p>
            <button onClick={
   props.add}>count++</button>
            <br/>
            <button onClick={
   props.minus}>count--</button>
        </>
    )
}

const mapStateToProps = state => state;
const mapDispatchToProps = {
   
    ...action
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter1);
  1. App.js
import Counter1 from './components/Counter1';


function App() {
   
  return (
    <div className=
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React-Redux是一个结合了React和Redux的库,它使得在React应用中集成状态管理变得更加容易。Redux是一个单一来源的状态管理库,而React-Redux提供了一组工具来帮助你将Redux的状态管理与React组件结合起来。 安装React-Redux的步骤通常是这样的: 1. 首先,确保你已经安装了Node.js和npm(Node包管理器)。 2. 在你的项目目录中,打开终端或命令提示符。 3. 使用npm或yarn来安装`react-redux`和`redux`库。如果你还没有安装`redux`,可以先安装: ```bash npm install redux ``` 或者使用yarn: ```bash yarn add redux ``` 4. 安装`react-redux`: ```bash npm install react-redux ``` 或者: ```bash yarn add react-redux ``` 5. 引入到你的项目中。通常会创建一个store来保存全局状态,以及将store连接到React组件上: ```javascript // 在index.js或App.js中 import { createStore } from 'redux'; import rootReducer from './reducers'; // 根 reducer,合并所有模块的reducer const store = createStore(rootReducer); // 如果你在使用react-redux,还需要引入Provider组件: import { Provider } from 'react-redux'; import App from './App'; // 你的React应用组件 function Root() { return ( <Provider store={store}> <App /> </Provider> ); } ReactDOM.render(<Root />, document.getElementById('root')); ``` 6. 在React组件中,使用`connect`函数从store中提取数据并处理dispatch动作: ```javascript import { useSelector, useDispatch } from 'react-redux'; function MyComponent() { const myState = useSelector(state => state.mySlice); // 选择store中的状态 const dispatch = useDispatch(); // 获取dispatch方法 // 在组件内部使用state和dispatch // ... } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南栀~zmt

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值