react-redux使用

目录

react-redux和redux的关系?

react-redux基本使用

1.安装

2.配置

3.组件中使用


react-redux和redux的关系?

redux是react中进行状态管理的js库(不是react插件),一般是管理多个组件中共享数据状态,和vue中的vuex是一样的

react-redux是redux官方react绑定库,能够使react组件从redux store中读取数据,并且向store分发actions以此来更新数据,说白了就是用于连接redux,它提供了connect和Provider两个Api

react-redux基本使用

1.安装

npm i react-redux@7 --save

尽量安装8.0以下的版本,8.0以上会报错,无法使用connect方法,提示hooks错误,provider也无法使用

2.配置

首先,我们在入口文件中配置react-redux的Provider方法,绑定store的redux对象数据

//导入react-redux的provier的组件
import { Provider } from "react-redux"
//...other
root.render(
  <Provider store={store}>
      <Routes />
  </Provider>
);

 注意:Provider的store参数必须写,如果不写,他会报错,他的原理跟我们使用context状态树中给provider传递的value值一样

3.组件中使用

在我们要使用的组件中尝试连接react-redux连接redux的数据

使用步骤

  • 导入react-redux依赖包,引入connect方法
  • connect有两个函数参数,mapStateToProps和mapDispatchToProps
  • 把redux中state数据和action方法直接映射到组件props属性中去
  • 组件中可以直接通过props使用redux中的数据,调用方法直接调用redux中的action的数据
  • connect( mapStateToProps,mapDispatchToProps)(组件名)

代码展示

import React from 'react';
import { connect } from 'react-redux';

export default function ReactRedux(props) {
    console.log(props);
  return (
    <div>
        <h3>react-redux</h3>
    </div>
  )
}
/把redux中的state数据映射到组件内部的变量
const mapStateToProps=(state)=>{
    console.log(state);
    return {
        ...state
    }
}
//把redux中action的操作,可以映射成为组件的props的内部函数
const mapDispathToProps=(dispatch)=>{
     return {
        plus:()=>dispatch({type:'PLUS'})
     }
}
//连接redux的操作的方法
ReactRedux=connect(mapStateToProps,mapDispathToProps)(ReactRedux)

connect方法执行完成以后绑定当前组件,复制完直接抛出即可

我们打印props中的数据会发现我们store中数据会作为props中属性给我们打印出来

这样,我们就可以使用props.属性/方法进行使用

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
最新版的 react-redux 使用方法如下: 首先,确保你的项目已经安装了 react-redux 依赖包。你可以使用以下命令安装它: ``` npm install react-redux ``` 或 ``` yarn add react-redux ``` 接下来,你需要创建一个 Redux store。你可以使用 Redux Toolkit 来简化这个过程。首先,导入 `configureStore` 和 `getDefaultMiddleware` 函数: ``` import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'; ``` 然后,创建一个 rootReducer 来合并你的所有 reducer: ``` import { combineReducers } from 'redux'; const rootReducer = combineReducers({ // 这里是你的 reducer }); ``` 接着,使用 `configureStore` 函数创建 Redux store。你可以通过传入一个对象来配置 store,例如指定 reducer、middleware 等等。以下是一个示例: ``` const store = configureStore({ reducer: rootReducer, middleware: getDefaultMiddleware() }); ``` 现在,你可以使用 `<Provider>` 组件来将 Redux store 提供给你的整个应用程序。在你的根组件中,导入 `<Provider>` 组件和你的 Redux store,然后将其包裹在应用的最外层: ``` import { Provider } from 'react-redux'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); ``` 通过将 Redux store 提供给整个应用程序,你可以在应用的任何地方使用 `useSelector` 和 `useDispatch` 钩子来访问 Redux store 中的状态和分发 action。例如,在你的组件中,你可以这样使用: ``` import { useSelector, useDispatch } from 'react-redux'; const MyComponent = () => { const counter = useSelector(state => state.counter); const dispatch = useDispatch(); // 使用 counter 和 dispatch }; ``` 这就是最新版的 react-redux使用方法。你可以根据你的具体需求,自定义配置和使用其他相关的 react-redux API。希望对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值