redux教程（三）在react中使用redux

react-redux

redux实现了一种机制，灵活的存储state，提供了获取state的方法——getState。提供了改变state的唯一方式：dispatch一个action。也提供了一种state的监听机制——subscribe。

但是在一个react项目中，redux还没有做到——如何把state注入到每一个组件容器中，以及组件如何接收state的值！这就需要使用一种在react项目搭配的库react-redux。

//获取方式
npm install --save react-redux;

Provider

在react项目中，只有把store给每一个组件通过props注入进去，才能让每个组件获取共享的state。为了保证每一个容器都能接收到store，react-redux提供了Provider组件。

<Provider store={store}>
    <App/>
</Provider>

connect

Provider提供了一种store注入的方式，可是一个组件如何接收这个store？可以不可选择不接收？这个就是由react-redux中的connect函数决定的。

import { connect } from 'react-redux'
export default connect()(App);

这样就把一个名为App的组件抛出。

具体示例

在index.js入口界面中：

/**
 * Created by mapbar_front on 2017/11/18.
 */

import React,{ Component } from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './App';

//定义action。一种是加，一种是减。
function add(){
    return {
        type: "ADD"
    }
}
function dec() {
    return {
        type: "DEC"
    }
}
//定义reducer
const reducers = (state = 0, action)=>{
    switch (action.type){
        case "ADD":
            return state+1;
            break;
        case "DEC":
            return state-1;
            break;
        default:
            return state
    }
}
//创建store
const store = createStore(reducers);
console.log(store.getState());


class Pro extends Component{
    //注入store
    render(){
        return (
            <Provider store={store}>
                <App/>
            </Provider>

        )
    }
}
render(<Pro />,document.getElementById('root'));

在子组件中，通过connect进行抛出：

/**
 * Created by mapbar_front on 2018/3/25.
 */
import React,{ Component } from 'react';
import { connect } from 'react-redux'
class App extends Component{
    add(){
        this.props.dispatch({
            type: "ADD"
        })
    }
    dec(){
        this.props.dispatch({
            type: 'DEC'
        })
    }
    render(){
        console.log('props',this.props)
        return (
            <div className="fx1 wrapper">
                <h1>当前数字是：{this.props.state}</h1>
                <button onClick={this.dec.bind(this)}>dec</button>
                <button onClick={this.add.bind(this)}>add</button>
            </div>
        )
    }
}
//在这里使用。
export default connect((state)=>{
    return {
        state: state
    }
})(App);