redux精品先导课程—08使用react-redux连接

首先安装这个库 npm i -S react-redux，然后用node ser跑起服务器

下面将上一节的代码进行改变

App.js

require('style/main.scss');
import * as React from 'react';

// require('component/demo.js');
// require('component/counterByRedux');
import {redux, createStore, applyMiddleware, bindActionCreators} from 'redux';
import thunk from 'redux-thunk';
import reducer from 'reducer';
import CounterPanel from "component/counter/CounterPanel";
import { Provider, connect } from 'react-redux';
import * as actionCreators from 'actions';

const store = createStore(reducer, applyMiddleware(thunk))

/* 此处写数据验证 */

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {A,B,addCounter,addIfOdd,asyncAdd,decrement,increment} = this.props;
        return (
            <div>
                <CounterPanel {...{
                    data: A,actions:{
                        addIfOdd,asyncAdd,decrement,increment
                    },addCounter,
                    panelName:'A'
                }}/>
                <CounterPanel {...{
                    data: B,actions:{
                        addIfOdd,asyncAdd,decrement,increment
                    },addCounter,
                    panelName:'B'
                }}/>
            </div>
        )
    }
}

App = connect(
    state=>state,
    dispatch => bindActionCreators(actionCreators,dispatch)
)(App);

ReactDOM.render(
    <Provider
        store={store}
    >
    <App />
    </Provider>,
    document.getElementById('root')
);

actions/index.js

export function increment(id) {
    return { type: 'INCREMENT', id }
}
export const decrement = (id, value) => dispatch => {
    if (value === 0) return
    dispatch({ type: 'DECREMENT', id })
}
export const addIfOdd = (id, value) => dispatch => {
    if (value % 2 === 0) return
    dispatch(increment(id))
}
export const asyncAdd = id => dispatch => {
    setTimeout(() => {
        dispatch(increment(id))
    }, 1000)
}
export const addCounter = panelName =>{
    return {type:'ADD_COUNTER',panelName}
}

component/counter/Counter.js

export default function Counter(props) {
    debugger
    let {
        increment,
        decrement,
        addIfOdd,
        asyncAdd,
        value,
        id
    } = props
    return (
        <div className="counter">
            <button className="sub"
                onClick={() => decrement(id,value)}
            ></button>
            <span>{value}</span>
            <button className="add"
                onClick={() => increment(id)}
            ></button>
            <button className="addIfOdd"
                onClick={() => addIfOdd(id,value)}
            ></button>
            <button className="addAsync"
                onClick={() => asyncAdd(id)}
            ></button>
        </div>
    )
}

本课程源码请到本人的github中去下载 https://github.com/JiaojSun