react-redux?action傳參及多個(gè)state處理如何實(shí)現(xiàn)

這篇文章主要講解了“react-redux action傳參及多個(gè)state處理如何實(shí)現(xiàn)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“react-redux action傳參及多個(gè)state處理如何實(shí)現(xiàn)”吧！

action 中傳遞參數(shù)

App.js 中 傳遞自己的參數(shù)

function App (props){
  console.log(props,'===')
  return (
    <div>
      <h2>redux</h2>
      <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  第一個(gè)參數(shù)  state  第二個(gè)參數(shù) 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
    }
  }

多個(gè)state狀態(tài)

增加一個(gè)新的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}>多個(gè) 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  第一個(gè)參數(shù)  state  第二個(gè)參數(shù) 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    創(chuàng)建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}>多個(gè) 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

多個(gè)reducer進(jìn)行整合   reducer下創(chuàng)建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  第一個(gè)參數(shù)  state  第二個(gè)參數(shù) 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  第一個(gè)參數(shù)  state  第二個(gè)參數(shù) 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   返回的結(jié)果是一個(gè)對(duì)象

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

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

映射的時(shí)候需要解構(gòu)

reducer1.js. 和reducer2.js  解構(gòu)state

import { colorstate } from "../state/state";
//2.定義 reducer  第一個(gè)參數(shù)  state  第二個(gè)參數(shù) 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  第一個(gè)參數(shù)  state  第二個(gè)參數(shù) 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傳參及多個(gè)state處理如何實(shí)現(xiàn)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)react-redux action傳參及多個(gè)state處理如何實(shí)現(xiàn)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！