redux-react-example.jsx

import { combineReducers, createStore, applyMiddleware } from 'redux'
import React, { PropTypes } from "react"
import { Provider, connect } from "react-redux"
import { render } from "react-dom"


// var reducer = function (state, action) {
//     return Object.assign({}, state, action)
// }


let defaultReducer = (state = 0, action) => {
    console.log("{{defaultReducer}}, state:\n", state, "\naction:\n", action)
    if (action && action.id && action.id % 2 == 1) {
        return {
            "data": [...action.data, action.id]
        }
    } else {
        return state
    }
}


let subReducer = (state = 0, action) => {
    console.log("{{subReducer}}, state:\n", state, "\naction:\n", action)
    if (action && action.id && action.id % 2 == 0) {
        return {
            "data": [...action.data, action.id]
        }
    } else {
        return state
    }
}

let rootReducer = combineReducers({
    a: defaultReducer,
    b: subReducer
})

let ai = 0

let action = function () {
    console.log("action::onclick", ai++)
    return {
        // type: "dispatching",
        type: "who-cares",
        id: ai,
        data: [
            "aa",
            "bb",
            "cc",
            "dd"
        ]
    }
}


function printStateMiddleware(middlewareAPI) {
    return function (dispatch) {
        return function (action) {
            console.log("{{dispatch}} BEFORE", middlewareAPI.getState())
            var returnValue = dispatch(action)
            console.log("{{dispatch}} AFTER", middlewareAPI.getState())
            return returnValue
        }
    }
}

let enhancedCreateStore = applyMiddleware(printStateMiddleware)(createStore)

export const store = enhancedCreateStore(rootReducer, {
    a: { "hello": "world" }
})

console.log("store", store.getState())

class Container extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            a: props.hello
        }
    }

    clickDom() {
        this.props.action1()
    }
    render() {
        console.log('render', this.state.a, this.props)
        return (
            <div>
                <h1>this is myCustomized Props [{this.props.my}]</h1>
                <hr />
                <p onClick={() => this.clickDom()}>测试react1管理的事件</p>
                <h1> DATA:A </h1>
                <ul>{this.props.data.length ? '结果' : '空结果'}
                    {this.props.data.map((ele) => {
                        return <li key={ele}>{ele}</li>
                    })}</ul>
                <hr />
                <h1> DATA:B </h1>
                <ul>{this.props.data2.length ? '结果' : '空结果'}
                    {this.props.data2.map((ele) => {
                        return <li key={ele}>{ele}</li>
                    })}</ul>
                {this.state.a}
                <p>
                    <span>[{this.props.hint}]</span>
                </p>
            </div>
        )
    }
}


let IndexContainer = connect((state, props) => ({
    data: state.a.data || [],
    data2: state.b.data || [],
    hint: state.type,
    hello: props.hello
}), (dispatch, props) => {
    console.log("props", props)
    return {
        action1: () => dispatch(action())
    }
}, (stateProps, dispatchProps, parentProps) => {
    return Object.assign({}, stateProps, dispatchProps, parentProps, { my: "myProps" })
})(Container)


class ModuleContainer extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (<Provider store={store}>
            <IndexContainer hello={"world2"} />
        </Provider>)
    }
}


export default ModuleContainer