react中配置redux

redux可以说是react里面非常重要的一个东西，加减，上下当前的数字一起改变

首先创建一个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

页面中的使用

创建一个components,components中先创建一个 index.js

import React, { Component } from 'react';



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


export default class Index extends Component {

    constructor(...args) {
        super(...args);
        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))
    }

}

再创建一个list.js

import React, { Component } from 'react';

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

export default class List extends Component {
    constructor(...args) {
        super(...args);
        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))
    }

}

这样就完成了，点击index文件里面数字加加，list里面的数值也就和index的一样了