react-redux应用

//reducers

const reducer1 = (state = {"test":"nihao"}, action= {}) => {
    switch (action.type) {
        case 'xxx':
        default:
            return state;
    }       
}
const reducer2 = (state = {}, action= {}) => {
    switch (action.type) {
        case 'xxx':
        default:
            return state;
    }       
}
export default {reducer1,reducer2};

import {createStore, combineReducers, applyMiddleware} from 'redux';
import reducer from '../reducers/reducer';

var store = createStore(
    combineReducers(reducer),
    //保证store的唯一性，通过combineReducers将多个reducer合并成一个
    applyMiddleware(thunk)
    //redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数，可作为异步操作的一种解决方案
);

export default store;

import React from 'react';
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import route from './js/route/route';
import store from './js/store/store';
store.subscribe(function () {
    // console.log(store.getState())
    //注册listener，store里面state发生改变后，执行该listener
})

ReactDOM.render(
    <Provider store = {store}>
    //Provider起到获得store，然后将其传递给子孙元素:
        {route}
    </Provider>,
    document.getElementById("app")
)

//连接redux

import { connect } from 'react-redux';
import actionCreators from '../actions/action';
//引入Action Creator
//const action = {};
//action.GET_DATA_START = (state) => {
//   return { state, type: 'GET_DATA_START' };
//}
//export default action


class Index extends Component{
    constructor(props) {
        super(props);
        this.state = this.props.state;
        //这个state就是reducer1中的state
        let {GET_DATA_START} = this.props;
        //GET_DATA_START 就是actionCreators中的方法
        GET_DATA_START(state);
        //调用方法，发送action更新state，render渲染
    }
    render(){
        return(
        )
    }
}
export default connect((state) => { return { state: state.reducer1 }, actionCreators)(Index)
//state.reducer1 获取reducer1中的state数据
//被 connect 过的Index 中的 this.props 有了  dispatch 属性。