脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react-redux action传参及多个state处理

react-redux action传参及多个state处理的实现

 更新时间：2022年07月27日 15:19:56   作者：敢问  
本文主要介绍了react-redux action传参及多个state处理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

action 中传递参数

App.js 中 传递自己的参数

function App (props){
  console.log(props,'===')
  return (
    <div>
      <h1>redux</h1>
      <button onClick={()=>{props.increment(10)}}>增加</button>
      <p>{props.count}</p>
      <button onClick={()=>{props.decrement(3)}}>减少</button>
    </div>
  )
}

action.js 传参

export  const increment = (num) => ({ type:'increment',payload:num })
export  const decrement = (num) => ({ type:'decrement',payload:num })

reduce.js 中打印 action

import { initstate } from "../state/state";
  //2.定义 reducer  第一个参数  state  第二个参数 action
 export  function reducer(state = initstate,action){
    console.log(action,'===action')
    switch(action.type){
      case 'increment' :return {count:state.count + action.payload}
      break;
      case 'decrement' :return {count:state.count - action.payload}
      break;
      default :return state
    }
  }

多个state状态

增加一个新的state。 控制div 的背景颜色

定义color 组建

function Color (props){
    let style = {
        width:100,
        height:100,
        background:props.color,
        textAlign:'center',
        lineHeight:100,
    }
    console.log('colorprops',props)
    return(
        <div>
            <button onClick={()=>{props.fngreen()}}>green</button>
            <button onClick={()=>{props.fnred()}}>red</button>
            <div style={style}>多个 state</div>
        </div>
    )
}
export default Color

定义state

// 3.定义state
export const  initstate = {
    count:0
}
//color
export const  colorstate = {
    color:'red'
}

定义action

export  const increment = (num) => ({ type:'increment',payload:num })
export  const decrement = (num) => ({ type:'decrement',payload:num })
//处理color
export  const fngreen = () => ({ type:'fngreen'})
export  const fnred = () => ({ type:'fnred' })

定义reducer 处理color的reducer1

import { colorstate } from "../state/state";
  //2.定义 reducer  第一个参数  state  第二个参数 action
 export  function reducer(state = colorstate,action){
    console.log(action,'===color')
    switch(action.type){
      case 'fngreen' :return {color:'green' }
      break;
      case 'fnred' :return {color:'red'}
      break;
      default :return state
    }
  }

store/index    创建store

import {createStore} from 'redux'
import{ reducer } from './reducer/reducer1'
  //1. 定义store
  let store = createStore( reducer )
  export default store 
  console.log(store)

color组建

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import *as actionobj from '../store/action/action'
function Color (props){
    let style = {
        width:100,
        height:100,
        background:props.color,
        textAlign:'center',
        lineHeight:100,
    }
    console.log('colorprops',props)
    return(
        <div>
            <button onClick={()=>{props.fngreen()}}>green</button>
            <button onClick={()=>{props.fnred()}}>red</button>
            <div style={style}>多个 state</div>
        </div>
    )
}
const mapStateToProps = function(state){
    return {color:state.color}
}
    const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(actionobj,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(Color);

 整合 reducer    combineReducers(reducers)

redux/combineReducers.md at master · reduxjs/redux · GitHub

多个reducer进行整合   reducer下创建index.js

 reducer/index.js

import { combineReducers } from 'redux'
import reducer1 from './reducer1'
import reducer2 from './reducer2'
export default combineReducers({
    reducer1,
    reducer2
})

reducer1.js

import { colorstate } from "../state/state";
//2.定义 reducer  第一个参数  state  第二个参数 action
export default function reducer1(state = colorstate,action){
    console.log(action,'===color')
    switch(action.type){
      case 'fngreen' :
          return {color:'green' }  
      break;
      case 'fnred' :
          return {color:'red'}  
      break;
      default :return state
    }
}

reducer2.js

import { initstate } from "../state/state";
  //2.定义 reducer  第一个参数  state  第二个参数 action
 export default  function reducer2(state = initstate,action){
    console.log(action,'===action')
    switch(action.type){
      case 'increment' :return {count:state.count + action.payload}
      break;
      case 'decrement' :return {count:state.count - action.payload}
      break;
      default :return state
    }
  }

store/index.js

import {createStore} from 'redux'
import reducer  from './reducer'
//1. 定义store
let store = createStore( reducer )
export default store

App.js 

注意：combineReducers   返回的结果是一个对象

{
    reducer1:{color:'red'},
    reducer2:{count:0}
}

所以在使用的。候需要。{props.reducer2.count}   background:props.reducer1.color, 

映射的时候需要解构

reducer1.js. 和reducer2.js  解构state

import { colorstate } from "../state/state";
//2.定义 reducer  第一个参数  state  第二个参数 action
export default function reducer1(state = colorstate,action){
    console.log(action,'===color')
    switch(action.type){
      case 'fngreen' :
          return {...state,color:'green' }  
      break;
      case 'fnred' :
          return {...state,color:'red'}  
      break;
      default :return state
    }
}
import { initstate } from "../state/state";
  //2.定义 reducer  第一个参数  state  第二个参数 action
 export default  function reducer2(state = initstate,action){
    console.log(action,'===action')
    switch(action.type){
      case 'increment' :return {...state,count:state.count + action.payload}
      break;
      case 'decrement' :return {...state,count:state.count - action.payload}
      break;
      default :return state
    }
  }

到此这篇关于react-redux action传参及多个state处理的实现的文章就介绍到这了,更多相关react-redux action传参及多个state处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 如何使用 React Native WebView 实现 App 与 Web 的通讯

    如何使用 React Native WebView 实现 App&nb

    通过 react-native-webview,我们可以轻松实现 App 与 Web 的双向通讯,这种技术非常适合需要在移动应用中嵌入复杂网页功能的场景,感兴趣的朋友一起看看吧
    2024-12-12
  • react实现antd线上主题动态切换功能

    react实现antd线上主题动态切换功能

    这篇文章主要介绍了react实现antd线上主题动态切换功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-08-08
  • React Hook的使用示例

    React Hook的使用示例

    这篇文章主要介绍了React Hook的使用示例，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04
  • react配合antd组件实现的管理系统示例代码

    react配合antd组件实现的管理系统示例代码

    这篇文章主要介绍了react配合antd组件实现的管理系统示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React-Native使用Mobx实现购物车功能

    React-Native使用Mobx实现购物车功能

    本篇文章主要介绍了React-Native使用Mobx实现购物车功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • react中的useContext具体实现

    react中的useContext具体实现

    useContext是React提供的一个钩子函数,用于在函数组件中访问和使用Context,useContext的实现原理涉及React内部的机制,本文给大家介绍react中的useContext具体实现,感兴趣的朋友一起看看吧
    2023-11-11
  • React Router 如何使用history跳转的实现

    React Router 如何使用history跳转的实现

    这篇文章主要介绍了React Router 如何使用history跳转的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React封装CustomSelect组件思路详解

    React封装CustomSelect组件思路详解

    小编需要封装一个通过Popover弹出框里可以自定义渲染内容的组件，渲染内容暂时有: 单选框, 复选框，接下来通过本文给大家分享React封装CustomSelect组件思路,需要的朋友可以参考下
    2022-07-07
  • React开启代理的2种实用方式

    React开启代理的2种实用方式

    最近有不少伙伴询问react的代理配置,自己也去试验了一下发现不少的问题,在这就将所遇到的心得分享出来,这篇文章主要给大家介绍了关于React开启代理的2种实用方式的相关资料,需要的朋友可以参考下
    2021-07-07
  • 浅谈React组件props默认值的设置

    浅谈React组件props默认值的设置

    本文主要介绍了浅谈React组件props默认值的设置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04

最新评论