Web开发 React 学习（十九）

利用redux 实现加减操作

安装

代码语言：javascript复制

npm install --save react-redux

使用。

创建一个dedux.js

代码语言：javascript复制

const counter=(state=0,action)=>{
    switch(action.type){

        case "decr":
            return state-1

        case "incre":
            return state 1
        default :
            return state
    }
       
}
export default counter

创建一个action

代码语言：javascript复制

export function inde(){
    return {
        type:"incre"
    }
}

export function decr(){
    return {
        type:"decr"
    }
}

在index界面引入

代码语言：javascript复制

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import * as serviceWorker from './serviceWorker';
import App from './app'
import reducer from "./counter"
import  {createStore} from "redux"
import {Provider} from "react-redux"

const store1=createStore(reducer)
// store.subscribe(()=>console.log("state",store.getState()))

ReactDOM.render(
  <Provider store={store1}><App/></Provider>,
    
  document.getElementById('root')
);

操作

代码语言：javascript复制

import React from "react"
import {connect} from "react-redux"
// import {inde,decr} from "./action"
import * as counterActions from "./action"
import {bindActionCreators} from "redux"

import Nav from "./compoents/nav/index"
import counter from "./counter"
class App extends React.Component{
    render(){
        const {incre,decre}=this.props
        return (
            <div>
                 <Nav/>
            <div>
        <h1>{this.props.counter}</h1>
            {/* <button onClick={this.props.onIncrement}>inc</button>
            <button  onClick={this.props.ondecrcrement}>decr</button> */}
             {/* <button onClick={()=>(incre())}>inc</button>
            <button  onClick={()=>(decre())}>decr</button> */}
            <button onClick={()=>(this.props.counterActions.inde())}>inc</button>
            <button  onClick={()=>(this.props.counterActions.decr())}>decr</button>
        </div>
            </div>
    
        )
           
        }
    
} 
const mapStateToProps=(store)=>{
    return{
        counter:store
    }
}
// const mapDispatchToProps=(dispatch)=>{
//     return {
//         incre:()=>dispatch(inde()),
//         decre:()=>dispatch(decr())
//     }
// }
const   mapDispatchToProps=(dispatch)=>{
    return{
        counterActions:bindActionCreators(counterActions,dispatch)
    }
}

//先后顺序不能颠倒
export default connect(mapStateToProps,mapDispatchToProps)(App)

对于上面的通用参数，可以统一提取。

最后结果

那么我们怎样去增加或者减少自定义的 其实很简单

代码语言：javascript复制

  <button onClick={()=>(this.props.counterActions.inde(1))}>inc</button>
            <button  onClick={()=>(this.props.counterActions.decr(2))}>decr</button>

代码语言：javascript复制

import * as actions  from "./constore/index"
const counter=(state=0,action)=>{
    switch(action.type){

        case actions.dec:
            return state-action.num

        case actions.insert:
            return state action.num
        default :
            return state
    }
       
}
export default counter

代码语言：javascript复制

import * as actions  from "./constore/index"
export function inde(num){
    return {
        type:actions.insert,
        num
    }
}

export function decr(num){
    return {
        type:actions.dec,
        num
    }
}

这样调整后就实现了。

redux action

0 人点赞