redux使用

安装包

yarn add redux //用于缓存

yarn add redux-thunk //实现异步请求

store文件夹

actionCreator.jsx

// 导入actionTypes
import {ADD,MINUS} from './actionTypes'

//同步的加
export const addCount = payload =>{
    return {
        type:ADD,
        payload
    }
}

//同步的减
export const minusCount = payload =>{
    return {
        type:MINUS,
        payload
    }
}

//异步的减
export const asyncMinusCount = payload => {
    return dispatch => {
        setTimeout(()=>{
            dispatch(minusCount(payload))
        }, 1000)
    }
}

actionTypes.jsx

export const ADD = 'ADD'
export const MINUS = 'MINUS'

index.jsx

import {createStore,applyMiddleware,compose} from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store =createStore(reducer, composeEnhancers(applyMiddleware(thunk)))
// const store =createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
export default store

reducer.jsx

import {ADD, MINUS} from './actionTypes'
export default(state = 0,action)=>{
    switch(action.type){
        case ADD:
            return state + action.payload;
        case MINUS:
            return state - action.payload
        default:
            return state
    }
}

使用规则

counter.jsx

import React, { Component } from 'react';
// 导入store
import store from './store'


import {addCount, asyncMinusCount} from './store/actionCreators'
class Counter extends Component {
    add=()=>{
        store.dispatch(addCount(3));
    }
    minus=()=>{
        store.dispatch(asyncMinusCount(2))
    }

    render(){
        return (
            <div>
                <button onClick={this.minus}>-</button>&nbsp;
                <button onClick={this.add}>+</button>
            </div>
        )
    }
}

export default Counter;

index.jsx

import React, {Component} from 'react';
import Counter from './Counter'
import Show from './Show'
class Index extends Component {
    render(){
        return (
            <div>
                <Counter/>
                <hr/>
                <Show/>
            </div>
        )
    }
}
export default Index;

show.jsx

import React, {Component} from 'react'
import store from './store/'

class Show extends Component {
    constructor() {
        super();
        this.state = {
            count :store.getState()
        }
    }

    componentDidMount() {
        store.subscribe(()=>{
            this.setState({
                count: store.getState()
            })
        })
    }

    render(){
        return (
            <div>
                仓库中最新的值是: {this.state.count}
            </div>
        )
    }
}

export default Show;