react中对redux的简易使用案例

redux可以说是react里面非常重要的一个东西，下面来通过一个小demo来更好的理解它

加减，上下当前的数字一起改变

首先创建一个store文件，专门存放redux代码

store中创建一个index.js

import {createStore} from 'redux'
import reducer from './reducer.js'

const store = createStore(reducer)

export default store

创建一个公共方法名constants.js

export const ADD_NUMBER = "ADD_NUMBER"
export const SUB_NUMBER = "SUB_NUMBER"

再创建一个actionCreators.js，专门存放方法名

import {
  ADD_NUMBER,
  SUB_NUMBER 
} from './constants.js'

export const addAction = num =>({
  type:ADD_NUMBER,
  num
})

export const subAction = num =>({
  type:SUB_NUMBER,
  num
})

最后创建reducer.js，存放事件

import {
  ADD_NUMBER,
  SUB_NUMBER
} from './constants.js'

const defaultState = {
  counter: 0
}

function reducer(state = defaultState, action) {
  switch (action.type) {
    case ADD_NUMBER:
      return { ...state, counter: state.counter + action.num }
    case SUB_NUMBER:
      return { ...state, counter: state.counter - action.num }
    default:
      return state
  }
}

export default reducer

页面中如何使用？

创建一个pages,pages中先创建一个home.js

import React, { PureComponent } from 'react'

import store from '../store/index'
import {
  addAction
}from '../store/actionCreators'

export default class home extends PureComponent {
   constructor(props){
     super(props);
     this.state={
       counter:store.getState().counter
     }
   }
   //订阅
   componentDidMount(){
    this.unsubscribe =  store.subscribe(()=>{
       this.setState({
         counter:store.getState().counter
       })
     })
   }
   //取消订阅
   componentWillUnmount(){
    this.unsubscribe()
   }
  render() {
    return (
      <div>
        <h1>home</h1>
        <h2>当前:{this.state.counter}</h2>
        <button onClick={e=>this.increament()}>+1</button>
        <button onClick={e=>this.addnumber(5)}>+5</button>
      </div>
    )
  }
  increament(){
   store.dispatch(addAction(1))
  }
  addnumber(num){
    store.dispatch(addAction(num))
  }
}

再创建一个about.js

import React, { PureComponent } from 'react'

import store from '../store/index'
import {
  subAction
}from '../store/actionCreators'

export default class about extends PureComponent {
  constructor(props){
    super(props);
    this.state={
      counter:store.getState().counter
    }
  }
  //订阅
  componentDidMount(){
   this.unsubscribe =  store.subscribe(()=>{
      this.setState({
        counter:store.getState().counter
      })
    })
  }
  //取消订阅
  componentWillUnmount(){
   this.unsubscribe()
  }
  render() {
    return (
      <div>
        <hr />
        <h1>about</h1>
        <h2>当前:{this.state.counter}</h2>
        <button onClick={e=>this.decreament()}>-1</button>
        <button onClick={e=>this.removenumber(5)}>-5</button>
      </div>
    )
  }
  decreament(){
    store.dispatch(subAction(1))
  }
  removenumber(num){
    store.dispatch(subAction(num))
  }
}

这样就完成了，但是发现里面有很多相同的代码，这个就给你们自己抽取啦