redux

1. reducer.js: combineReducers插件进行多个reducer整合,

2. store.js: 在createStore中，将整合后的reduce传入，applyMiddleware插件处理redux-thunk加强action

3. app.js:  通过Provider标签将store传入

1. app.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import routers from './main/routers';
import configureStore from './main/store';
const store = configureStore();

render(
  <Provider store={store}>{routers}</Provider>, // 组件可以在this.context中获取store
  document.getElementById('app')
);

2.store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import appReducer from '../reducers';

export default function configureStore(initialState) {
    const store = createStore(
        appReducer,
        initialState,
        applyMiddleware(thunkMiddleware) // 加强action,在action中return 函数（函数中处理异步），applyMiddleware插件可以接受多个插件，然后进行整合
    );
    return store;
}

3. actions.js

export const getAmount() => {
    // thunk插件会处理action中return的函数
    retrun (dispath)=>{
    //异步请求后端接口
        return fetchAmount().then(
             data=>dispath(receviePostOnSuccess(data))
        )
    }
}

4. reducer.js

import { combineReducers } from 'redux';
import { routerReducer as routing } from 'react-router-redux';
import MapReducer from './reducer/mapReducer';
// combineReducers对多个reducer进行整合
const appReducer = combineReducers({
	routing,
	MapReducer
});
export default appReducer;

// MapReducer.js
let defaultState = {}
export default function MapReducer(state = defaultState, action) {
    let { type, payload } = action;
    switch (type) {
        case 'UPDATE_COUNT':
            return { ...state, count: state.count + 1 }
        default:
            return state
    }
}