如何在ReactNative中使用Redux？

首先，我们通过运行命令“ npx react-native init reduxDemo”创建一个新的ReactNative项目。您也可以将Redux集成到现有项目中。

通过“ cd {rootDirectory} / reduxDemo”转到项目文件夹并安装依赖项。

1. “ npm install redux”是官方的Redux依赖项。
2. “ npm install react-redux”用于连接redux以进行反应。

目录结构：这是我正在使用的目录结构。您可以创建自己的最适合您的目录结构。

MyAssets目录包含其中包含了所有的终极版代码，并包含所有的屏幕组件屏幕目录终极版目录。

我以Burger(food)为例，显示诸如购买或创建Burger这样的操作，这将导致Burgers数量减少或增加。

我们将一一创建MyAssets目录中的所有文件。

目录结构

逐步示例：我们将在reduxDemo项目中创建MyAssests目录。 MyAssets将包含应用程序屏幕组件以及Redux的所有文件。在MyAssets内部，我们将创建一个名为Redux的目录，其中将包含我们所有的Redux代码。

创建动作：在Redux目录中，我们将创建一个名为Burger的目录，其中将包含我们所有的动作和Burger的reducer 。

为了创建动作，我们将在Burger目录中创建两个文件bugerActionTypes.js和burgerAction.js 。

• burgerActionTypes.js：在此文件中，我们导出所有字符串action_type属性。该文件是完全可选创建的，如果没有该文件，我们将不得不在action和reducer中手动编写字符串Action_type。

Javascript

// all action String Type will be exported from here
export const INCREASE_BURGER='INCREASE_BURGER';
export const DECREASE_BURGER='DECREASE_BURGER';

• burgerAction.js：在此，我们将创建操作函数，该函数将action_type和可选的有效负载属性返回给reducer。

Java脚本

import {INCREASE_BURGER,DECREASE_BURGER} from './burgerActionTypes';
  
  
// Action functions which return action type and 
// optional payLoad to burgerReducer
  
export const increaseBurgerAction=(parameter)=>{
    return{
        type:INCREASE_BURGER,
        payload:parameter
    }
}
  
export const decreaseBurgerAction=()=>{
    return{
        type:DECREASE_BURGER
    }
}

创建Reducer：在Burger目录中，我们将创建一个文件burgerReducer.js。在此文件中，我们将创建一个burgerReducer()函数，该函数将初始状态和操作作为参数，并根据action_type返回商店的新状态。

Java脚本

import {INCREASE_BURGER,DECREASE_BURGER} from './burgerActionTypes';
  
//initializing state 
const initialState={
    numberOfBurger:10
}
  
const burgerReducer=(state=initialState,action)=>{
    switch(action.type){
        case INCREASE_BURGER:return{
            ...state,
            numberOfBurger:state.numberOfBurger+action.payload
        }
        case DECREASE_BURGER:return{
            ...state,
            numberOfBurger:state.numberOfBurger-1
        }
        default:return state
    }
}
  
export default burgerReducer;

创建商店：在Redux目录中，我们将创建两个文件store.js和index.js 。

• Index.js：此文件将用于导出单个文件中的所有操作。该文件是完全可选创建的，您也可以从各自的JavaScript文件中导入操作。

Java脚本

// Single file for exporting all actions
export {increaseBurgerAction} from './Burger/burgerAction';
export {decreaseBurgerAction} from './Burger/burgerAction';

• store.js：在这个文件中，我们将导入所有reducer ，然后创建一个商店并将其导出到App.js.我们也可以在App.js中创建一个商店，但为了保持代码更干净，我创建了一个单独的文件。

Java脚本

import {createStore} from 'redux';
  
import burgerReducer from './Burger/burgerReducer';
  
// Passing burgerReducer to createStore
const store=createStore(burgerReducer);
  
export default store;

• App.js：在App.js中，我们从‘react-redux’导入提供程序组件，并从store.js进行存储。 Provider用于将存储状态传递给其所有子组件。

Java脚本

import React from 'react';
import {Provider} from 'react-redux';
  
import store from './MyAssets/Redux/store';
import Screen from './MyAssets/Screens/screen'
  
  
  
const App= () => {
  return (
    
    
    
  );
};
    
  
export default App;

创建我们的屏幕组件：现在，最后我们将创建我们的屏幕组件以使用和更新商店状态。在MyAssets目录中，我们将创建一个名为Screens的目录，其中将包含我们所有的应用程序屏幕组件。在Screens目录中，我们将创建一个名为screen.js的文件。

Java脚本

import React, { Component } from 'react'
import { Text, View,Button } from 'react-native'
import {connect} from 'react-redux'
import {increaseBurgerAction,decreaseBurgerAction}  from '../Redux/index'
  
class Screen extends Component {
    render() {
        return (
            
                
                 Number Of Burger = {this.props.numberOfBurger} 
                {this.props.increaseBurger(5)}}/>
                
                
                {this.props.decreaseBurger()}}/>
                
            
        )
    }
}
  
const mapStateToProps=(state)=>{
    return{
        numberOfBurger:state.numberOfBurger
    }
}
  
const mapDispatchToProps=(dispatch)=>{
        return{
            increaseBurger:(parameter)=>{dispatch(increaseBurgerAction(parameter))},
            decreaseBurger:()=>{dispatch(decreaseBurgerAction())}
        }
}
  
export default connect(mapStateToProps,mapDispatchToProps)(Screen);

• 渲染：商店状态更改时调用此方法。
• mapStateToProps：此函数将商店状态映射到要用作道具的屏幕组件。除了mapStateToProps，我们还可以重命名它。
• mapDispatchToProps：此函数将动作映射到要使用props调用的屏幕组件。除了mapDispatchToProps，我们还可以重命名它。
• connect：这是一个‘react-redux’内置函数，用于将屏幕组件连接到mapStateToProps和mapDispatchToProps。始终将mapStateToProps作为第一个参数，将mapDispatchToProps作为第二个参数传递给connect()函数，否则会产生错误。

输出：

1. 首先，我们在按钮从我们component.Notice调用this.props.increaseBurger(5)我们如何通过数字“5”作为一个参数，该参数将被提供给increaseBurgerAction的mapDispatchToProps函数(参数)的函数。
2. 然后，将调用burgerActions.js文件的gainBurgerAction () ，它将把action_type和’5’作为有效载荷返回给reducer函数。
3. 然后将调用burgerReducer()函数，该函数将接受初始状态和操作作为参数，然后将numberOfBurger从初始值增加到+5。

• this.props.decreaseBurger()在按钮的工作方式相同this.props.increaseBurger()。注意，这次我们没有传递任何参数。

多个Reducer：在大多数情况下，我们必须使用多个Reducer才能分离状态和动作。为了说明这一点，我创建了另一个名为Pizza的目录，其中包含PizzaReducer.js，pizzaActionsType.js的代码， 和pizzaActions.js。

• store.js：在这里，我们使用combinedReducers() ，它是‘redux’的内置函数来组合我们的reducer。

Java脚本

import {createStore,combineReducers} from 'redux';
  
import burgerReducer from './Burger/burgerReducer';
import pizzaReducer from './Pizza/pizzareducer';
  
// Combining burgerReducer and pizzaReducer in rootReducer
const rootReducer=combineReducers({
    burgerReducer:burgerReducer,
    pizzaReducer:pizzaReducer
})
  
// Passing rootReducer to createStore
const store=createStore(rootReducer);
  
export default store;

• pizzaReducer.js：

Java脚本

import {PIZZA_DECREASE,PIZZA_INCREASE} from './pizzaActionsType';
  
// Initializing state 
const initialState={
    numberOfPizza:30
}
  
const pizzaReducer=(state=initialState,action)=>{
    switch(action.type){
        case PIZZA_INCREASE:return{
            ...state,
            numberOfPizza:state.numberOfPizza+action.payload
        }
        case PIZZA_DECREASE:return{
            ...state,
            numberOfPizza:state.numberOfPizza-1
        }
        default:return state
    }
}
  
export default pizzaReducer;

• pizzaActionType.js：

Java脚本

export const PIZZA_INCREASE='PIZZA_INCREASE';
export const PIZZA_DECREASE='PIZZA_DECREASE';

• pizzaActions.js：

Java脚本

import {PIZZA_INCREASE,PIZZA_DECREASE} from './pizzaActionsType';
  
  
// Action functions which return action type 
// and optional payLoad to burgerReducer
  
export const increasePizzaAction=(parameter)=>{
    return{
        type:PIZZA_INCREASE,
        payload:parameter
    }
}
  
export const decreasePizzaAction=()=>{
    return{
        type:PIZZA_DECREASE
    }
}

• index.js：

Java脚本

// Single file for exporting all actions
export {increaseBurgerAction} from './Burger/burgerAction';
export {decreaseBurgerAction} from './Burger/burgerAction';
  
export {increasePizzaAction} from './Pizza/pizzaActions';
export {decreasePizzaAction} from './Pizza/pizzaActions';

• screen.js –修改我们的屏幕组件代码以使用披萨动作和状态。

Java脚本

import React, { Component } from 'react'
import { Text, View,Button } from 'react-native'
import {connect} from 'react-redux'
import {increaseBurgerAction,decreaseBurgerAction,increasePizzaAction,decreasePizzaAction}  from '../Redux/index'
  
class Screen extends Component {
    render() {
        return (
            
                
                 Number Of Burger = {this.props.numberOfBurger} 
                {this.props.increaseBurger(5)}}/>
                {this.props.decreaseBurger()}}/>
                
                
                 Number Of Pizza = {this.props.numberOfPizza} 
                {this.props.increasePizza(5)}}/>
                {this.props.decreasePizza()}}/>
                
            
        )
    }
}
  
const mapStateToProps=(state)=>{
    return{
        numberOfBurger:state.burgerReducer.numberOfBurger,
        numberOfPizza:state.pizzaReducer.numberOfPizza
    }
}
  
const mapDispatchToProps=(dispatch)=>{
        return{
            increaseBurger:(parameter)=>{dispatch(increaseBurgerAction(parameter))},
            decreaseBurger:()=>{dispatch(decreaseBurgerAction())},
  
            increasePizza:(parameter)=>{dispatch(increasePizzaAction(parameter))},
            decreasePizza:()=>{dispatch(decreasePizzaAction())}
        }
}
  
export default connect(mapStateToProps,mapDispatchToProps)(Screen);

输出：

想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?

单击此处前往由我们的专家精心策划的指南，以使您立即做好行业准备！