Redux超集

redux的使用

cnpm install redux -S

//创建 store.js
import { createStore } from 'redux'

//初始化数据
const counterReducer =(store = 0;action)=>{
    switch (action.type){
        case 'add' :
            return state + 1;
        break;
        case 'minus': 
            return state - 1;
        break;
        default :
            return state;
        break;
    }
}

const store=createStore( createStore )


export default store;

使用 Redirect.js

import React from 'react';
import store from '../store'

export default function Redirect(){
    return (
        <div>
            <p>{store.getState()}</p>
            <button onClick={()=> store.dispatch({type: 'add'})}></button>
        </div>
    )
}

订阅更新

//原始方法,在index.js中
store.subscribe(()=>{
    ReactDOM.render (<APP />,document.getElementById("root"))
})

react-redux

cnpm install react-redux -S

APP.js

import { Provider } from 'react-redux'
//Provider 为顶级组件，提供数据
<Provider store={ store }>
    <APP />
</Provider>

使用

import { connect } from 'react-redux'

//映射函数
const mapStateToProps = state => ({num: state});
const mapDispatchToProps = {
    add: ()=>({
        type: 'add'
    }),
    minus: () =>({
        type: 'minus'
    })
}

// 函数写法
 function ReduxText({num, add, minus}){
    return (
        <p>{ num }</p>
        <button onClick={ add }></button>
    )
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ReduxText)

//装饰器写法
@connect( 
    mapStateToProps, 
    mapDispatchToProps 
)
class ReduxText extends Component {
    render (){
        const { num , add, minus } = this.props;
        return (
            <div>
                <p>{ num  }</p>
            </div>
        )
    }
}

export default ReduxText;

异步操作 redux-thunk

cnpm install redux-thunk -S

在 store.js 中应用中间件

//创建 store.js
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger';
import thunk from 'redux-thunk';
//初始化数据
const counterReducer =(store = 0;action)=>{
    switch (action.type){
        case 'add' :
            return state + 1;
        break;
        case 'minus': 
            return state - 1;
        break;
        default :
            return state;
        break;
    }
}

//使用中间件，注意顺序
const store=createStore( createStore ,applyMiddleware(logger,thunk))

export default store;



//然后就可以发送异步请求
const mapDispatchToProps = {
    add: ()=>({ type : 'add'}),  //这是是return 一个对象
    asyncAdd: ()=> dispatch =>{  //这里是return 一个函数
        setTimeout(()=>{
            dispatch({ type: "add" })  //派发操作
        },1000)
    }
}

store 的抽离

 // index.js
//这里 到处 状态
export const counterReducer =(store = 0;action)=>{
    switch (action.type){
        case 'add' :
            return state + 1;
        break;
        case 'minus': 
            return state - 1;
        break;
        default :
            return state;
        break;
    }
}


//这里是 声明 需要在组件中导入的状态
export const add = () => ({type: 'add'})

export const asyncAdd = () => dispatch =>{
    //异步操作
    setTimeout(() => {
        dispatch({ type : 'add'});
    },1500)
}

// store.js
import { createStore, applyMiddleware, combineReducers } from 'redux'

import logger from 'redux-logger';
import thunk from 'redux-thunk';
import { index } from './index'

const store = createStore(
    combineReducers({index:index}),  //可以注册多个状态
    applyMiddleware(logger, thunk))

export default store;

//获取的时候要加上命名空间
const mapStateToProps = state => ({ num: state.index })