【React】React-Redux

react-redux
摘要由CSDN通过智能技术生成


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="App"
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
react-native-redux-router是一个用于在React Native应用中管理路由和状态的库。它结合了React Native、Redux和React Navigation,提供了一种方便的方式来处理应用程序的导航和状态管理。 下面是一个简单的示例,演示了如何在React Native应用中使用react-native-redux-router: 1. 首先,安装所需的依赖项。在终端中运行以下命令: ```shell npm install react-native react-redux redux react-navigation react-native-router-flux --save ``` 2. 创建一个Redux store,并将其与React Native应用程序的根组件连接起来。在App.js文件中,添加以下代码: ```javascript import React from 'react'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import rootReducer from './reducers'; import AppNavigator from './navigation/AppNavigator'; const store = createStore(rootReducer); export default function App() { return ( <Provider store={store}> <AppNavigator /> </Provider> ); } ``` 3. 创建一个导航器组件,并定义应用程序的导航结构。在navigation/AppNavigator.js文件中,添加以下代码: ```javascript import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { Actions } from 'react-native-router-flux'; import HomeScreen from '../screens/HomeScreen'; import DetailsScreen from '../screens/DetailsScreen'; const MainNavigator = createStackNavigator({ Home: { screen: HomeScreen }, Details: { screen: DetailsScreen }, }); const AppNavigator = createAppContainer(MainNavigator); const mapStateToProps = state => ({ // 将Redux状态映射到导航器组件的props中 }); const mapDispatchToProps = dispatch => bindActionCreators(Actions, dispatch); export default connect(mapStateToProps, mapDispatchToProps)(AppNavigator); ``` 4. 创建屏幕组件,并在其中使用导航和Redux状态。在screens/HomeScreen.js文件中,添加以下代码: ```javascript import React from 'react'; import { View, Text, Button } from 'react-native'; import { Actions } from 'react-native-router-flux'; const HomeScreen = () => { return ( <View> <Text>Welcome to the Home Screen!</Text> <Button title="Go to Details" onPress={() => Actions.details()} /> </View> ); } export default HomeScreen; ``` 5. 创建其他屏幕组件,并在其中使用导航和Redux状态。在screens/DetailsScreen.js文件中,添加以下代码: ```javascript import React from 'react'; import { View, Text, Button } from 'react-native'; import { Actions } from 'react-native-router-flux'; const DetailsScreen = () => { return ( <View> <Text>Welcome to the Details Screen!</Text> <Button title="Go back" onPress={() => Actions.pop()} /> </View> ); } export default DetailsScreen; ``` 这是一个简单的示例,演示了如何在React Native应用中使用react-native-redux-router来管理路由和状态。你可以根据自己的需求进行扩展和定制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

南栀~zmt

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

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

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

打赏作者

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

抵扣说明:

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

余额充值