react-redux使用

定义公用变量和方法

export default(state = {
	items:['aaa','bbb']
},action) => {
	switch(action.type){
		case 'ADD':
			state.items.push('ccc')
			console.log(state)
		default:
			return state
	}
}

1.在页面上调用变量

import {createStore} from 'redux'
import items from './store/index';

const store=createStore(items)
let item=store.getState().items

　　

2.在页面执行方法改变公共变量

store.dispatch({type:'ADD'})

　　

3.更新视图

const render=()=>{
	ReactDOM.render(
	  <Header data={store.getState().items} todo={()=>store.dispatch({type:'ADD'})} />,
	  document.getElementById('header')
	);
}

store.subscribe(render)
store.subscribe(function(){
    console.log('有更新了....')
})
render()

　　

 4.react-redux使用

import React,{Component} from 'react';
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

// 纯组件
class Counter extends Component {
    render() {
        const { value, addOne ,lessOne } = this.props
        return (
            <div>
                <span>{value}</span>
                <button onClick={addOne}>+1</button>
                <button onClick={lessOne}>-1</button>
            </div>
        )
    }
}


// Action
const addAction = { type: 'ADD' }
const lessAction = { type: 'LESS' }

// Reducer 状态机控制器
function jiajia(state = { count: 0 }, action) {
    const count = state.count
    switch (action.type) {
        case 'ADD':
            return { count: count + 1 }
        case 'LESS':
            return { count: count - 1 }
        default:
            return state
    }
}

// createStore
const store = createStore(jiajia)

// 外部状态机
function mapStateToProps(state) {
    return {
        value: state.count
    }
}

// 外部方法
function mapDispatchToProps(dispatch) {
    return {
        addOne: () => dispatch(addAction),
        lessOne: () => dispatch(lessAction)
    }
}

// connect 是react-redux提供的方法
const App = connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter)

// Provider组件用于生成容器，获取到store
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('header')
)